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

1. 原理

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

1. 实现方式

"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 ]

*/

1. 总结

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

---

最新文章

1. Hbase+ Phoenix搭建教程
2. 数据获取以及处理Beta版本展示
3. HTML页面主体常用设置
4. 洛谷P3378 【模板】堆
5. NHibernate 3.2+的 Map by Code 实例
6. 关于WII光枪定位的设计(转)
7. 微信支付java版V3验证数据合法性
8. Oracle中的Spool缓冲池技术可以实现Oracle导出txt格式文件
9. HNOI2016 网络
10. HTML5的优缺点是什么?
11. mysql 查询性能优化第一章 为什么查询速度会慢
12. xamarin android menu的用法
13. vscode断点调试本地客户端文件
14. 文件上传（xls）
15. Python全栈开发之路 【第十八篇】：Ajax技术
16. 云服务器ECS
17. 用java代码解决excel打开csv文件乱码问题
18. 数据库部分（MySql）_1
19. PCA whitening
20. 二分搜索-HihoCoder1139

热门文章

1. kubernetes用户权限管理工具permission-manager
2. testng学习笔记-- beforesuit和aftersuit
3. 3、剑指offer-数组——数组中重复的数字
4. XCTF-你是谁
5. Spring MVC——基础（简介，使用，地址映射）
6. 将将List json 转成List<?>实体
7. 通过模拟数据，使用js在前端实现模糊查询下拉框功能实例教程
8. C++模板的介绍
9. 2019 Multi-University Training Contest 1 A.Blank（dp）
10. 哈希算法解决：HDU1686 && POJ2774 && POJ3261