xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

如何使用 js 实现一个 debounce 函数

1. 原理

防抖: 是指在指定的单位时间内，如果重复触发了相同的事件，则取消上一次的事件，重新开始计时！

2. 实现方式

"use strict";

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

const log = console.log;

// 防抖: 是指在指定的单位时间内，如果重复触发了相同的事件，则取消上一次的事件，重新开始计时！
function debounce(callback, timer = 1000) {
  let id = null;
  return function() {
    clearTimeout(id);
    id = setTimeout(() => {
      callback();
    }, timer);
  }
}

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

const test = debounce(cb, 3000);

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



/*

$ node debounce.js

test [Function]
test2
test3
callback function!

*/

this & arguments

"use strict";

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

const log = console.log;

// 防抖: 是指在指定的单位时间内，如果重复触发了相同的事件，则取消上一次的事件，重新开始计时！
function debounce(callback, timer = 1000) {
  let id = null;
  return function() {
    // const args = [...arguments];
    const args = arguments;
    const that = this;
    // function (this, arguments)
    clearTimeout(id);
    id = setTimeout(function () {
      log(`that`, that)
      log(`this`, this)
      log(`args`, args)
      callback.call(that, [...args]);
    }, timer);
    // Arrow Function (this)
    // id = setTimeout(() => {
    //   callback();
    // }, timer);
  }
}

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

const test = debounce(cb, 3000);

log(`test`, test);
test(`args = arguments`, 1);

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



/*

$ node debounce.js

test [Function]
test2
test3
callback function!

*/



/*

$ node debounce.js

test [Function]
test2
test3
that undefined
this Timeout {
  _idleTimeout: 3000,
  _idlePrev: null,
  _idleNext: null,
  _idleStart: 2044,
  _onTimeout: [Function],
  _timerArgs: undefined,
  _repeat: null,
  _destroyed: false,
  [Symbol(refed)]: true,
  [Symbol(asyncId)]: 11,
  [Symbol(triggerId)]: 7
}
args [Arguments] { '0': 'args = arguments', '1': 3 }
callback function! [ 'args = arguments', 3 ]

*/

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 发布文章使用：只允许注册用户才可以访问！

---