如何使用 js 实现一个 throttle 函数 All In One

如何使用 js 实现一个 throttle 函数 All In One

1. 原理

2. 实现方式

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-10-01
 * @modified
 *
 * @description 节流 throttle
 * @difficulty Easy Medium Hard
 * @complexity O(n)
 * @augments
 * @example
 * @link
 * @solutions
 *
 * @best_solutions
 *
 */

const log = console.log;

// 节流: 是指在指定的单位时间内，如果重复触发相同的事件，则忽略后面的事件，直到上一次的事件执行完成，才会重新开始执行下一次的事件！

function throttle(callback, timer = 1000) {
  let id = null;
  let flag = true;
  return function() {
    if(!id && flag) {
      id = setTimeout(() => {
        callback();
        clearTimeout(id);
        // flag = true;
      }, timer);
    } else {
      log(`等待中，忽略后面事件的执行!`);
      // flag = false;
    }
  }
}



const cb = () => log(`callback function!`)

const test = throttle(cb, 3000);

log(`test`, test);
test();
setTimeout(() => {
  log(`test2`);
  test();
}, 1000);
setTimeout(() => {
  log(`test3`);
  test();
}, 2000);

/*

$ node throttle.js

test [Function]
test2
等待中，忽略后面事件的执行!
test3
等待中，忽略后面事件的执行!
callback function!

*/

this & arguments

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-10-01
 * @modified
 *
 * @description 节流 throttle
 * @difficulty Easy Medium Hard
 * @complexity O(n)
 * @augments
 * @example
 * @link
 * @solutions
 *
 * @best_solutions
 *
 */

const log = console.log;

// 节流: 是指在指定的单位时间内，如果重复触发相同的事件，则忽略后面的事件，直到上一次的事件执行完成，才会重新开始执行下一次的事件！

function throttle(callback, timer = 1000) {
  let id = null;
  let flag = true;
  return function() {
    // const args = [...arguments];
    const args = arguments;
    const that = this;
    // function (this, arguments)
    if(!id) {
      id = setTimeout(function () {
        log(`that`, that)
        log(`this`, this)
        log(`args`, args)
        callback.call(that, [...args]);
        clearTimeout(id);
        // flag = true;
      }, timer);
    } else {
      log(`等待中，忽略后面事件的执行!`);
      // flag = false;
    }
    // if(!id && flag) {
    //   id = setTimeout(() => {
    //     callback();
    //     clearTimeout(id);
    //     // flag = true;
    //   }, timer);
    // } else {
    //   log(`等待中，忽略后面事件的执行!`);
    //   // flag = false;
    // }
  }
}



const cb = (args) => log(`callback function!`, args);

const test = throttle(cb, 3000);

log(`test`, test);
// test();
test(`args = arguments`, 1);
setTimeout(() => {
  log(`test2`);
  test(`args = arguments`, 2);
}, 1000);
setTimeout(() => {
  log(`test3`);
  test(`args = arguments`, 2);
}, 2000);

/*

$ node throttle.js

test [Function]
test2
等待中，忽略后面事件的执行!
test3
等待中，忽略后面事件的执行!
callback function!

*/


/*

$ node throttle.js
test [Function]
test2
等待中，忽略后面事件的执行!
test3
等待中，忽略后面事件的执行!
that undefined
this Timeout {
  _idleTimeout: 3000,
  _idlePrev: null,
  _idleNext: null,
  _idleStart: 37,
  _onTimeout: [Function],
  _timerArgs: undefined,
  _repeat: null,
  _destroyed: false,
  [Symbol(refed)]: true,
  [Symbol(asyncId)]: 5,
  [Symbol(triggerId)]: 1
}
args [Arguments] { '0': 'args = arguments', '1': 1 }
callback function! [ 'args = arguments', 1 ]
*/

3. 总结

refs

https://www.cnblogs.com/xgqfrms/p/11886342.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---