共计 812 个字符,预计需要花费 3 分钟才能阅读完成。
防抖
触发高频事件后,n 秒内函数只执行一次,如果 n 秒内高频事件再次被触发则从新计算工夫。
思路:
每次触发事件时,都勾销之前的延时调用办法。
function debounce(fn,wait) {
let timeout = null; // 创立一个标记用来寄存定时器的返回值
let timeWait = wait || 1000
return function () {
const that = this,
args = arguments;
clearTimeout(timeout); // 每当用户输出的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => {fn.apply(that , args);//1,this 指向 2,event 对象
}, timeWait);
};
}
防抖
高频事件触发,但在 n 秒内只会执行一次,所以节流会浓缩函数的执行频率
思路:
每次触发事件时都判断以后是否有期待执行的延时函数
function throttle(fn,wait) {
let canRun = true; // 通过闭包保留一个标记
let timeWait = wait || 1000;
return function () {
const that = this,
args = arguments;
if (!canRun) return; // 在函数结尾判断标记是否为 true,不为 true 则 return
canRun = false; // 立刻设置为 false
setTimeout(() => { // 将内部传入的函数的执行放在 setTimeout 中
fn.apply(that, args);
// 最初在 setTimeout 执行结束后再把标记设置为 true(要害) 示意能够执行下一次循环了。当定时器没有执行的时候标记永远是 false,在结尾被 return 掉
canRun = true;
}, 500);
};
}
链接:
JavaScript 专题之跟着 underscore 学防抖
JavaScript 专题之跟着 underscore 学节流
正文完
发表至: javascript
2020-08-06