如何使用 js 实现一个 throttle 函数
2024-09-05 04:48:38
如何使用 js 实现一个 throttle 函数
原理
实现方式
"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 ]
*/
- 总结
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 发布文章使用：只允许注册用户才可以访问！
最新文章
- 【转载】写一个js库需要怎样的知识储备和技术程度？
- acm之poj题库1019方法
- HDU 4405 (概率DP)
- Python 之 lambda 函数
- Oracle 多行记录合并/连接/聚合字符串的几种方法
- 客户端接口AGENDA
- HDU 4461 The Power of Xiangqi （水题）
- 1048: [HAOI2007]分割矩阵 - BZOJ
- PC-常见问题-清除浮动
- Android之Margin和Padding属性及支持的长度单位
- m个苹果放入n个盘子问题
- big_menu菜单设置
- 封装和static 以及关键字“this”的用法
- Scala实现树形结构
- JSP(8)—EL案例和JSTL案例
- IT人员如何开好站立会议
- ArcGIS工具备忘
- SpringBoot整合Servlet的两种方式
- [游记] HEOI2018酱油记
- python之旅：网络基础之网络协议篇