摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。
废话不多说，直奔主题。
什么是throttle和debounce？这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多次，如果其中涉及的代码偏重，那么性能消耗肯定是非常大。使用节流和防抖就是去优化这种情况，通过同的使用场景决定使用的对象，接下来就对比一下两者的区别。
throttle在指定的delay(延迟时间)内，在delay间隔内多次调用，throttle会舍弃中间的所有调用操作，直到用户停止行为后的delay后执行一次预期执行函数。这就称为函数节流。
debounce跟节流函数一样，debounce也是在设定的delay间隔内多次调用执行函数的话，会舍弃这些操作。和throttle不同的是，debounce多了个强制执行时间参数mustRunDelay，不管前面舍弃了多少次操作，一旦时间tag>=mustRunDelay的话，执行函数一定会被调用一次。接下来上代码，更直观。
原文参考源代码出处
原文对于节流和防抖的描述有待商榷，但是最终的代码其实就是节流和防抖的综合体。通过是否传入mustRunDelay参数来区分。
function throttle (fn, delay, mustRunDelay = 0) {
let timer = null;
let tStart; //创建父级作用域时间tag
return function () {
const context = this;
const args = arguments;
const tCurr = +new Date();//子作用域时间tag
clearTimeout(timer);//每次执行，先清空定时器，这步操作便是delay时间内舍弃多余操作的实现
if (!tStart) { // 首次给时间tag赋值
tStart = tCurr;
}
//这层判断就是判断是否达到强制执行的条件
if (mustRunDelay !== 0 && tCurr - tStart >= mustRunDelay) {
fn.apply(context, args);
tStart = tCurr;
} else {
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
}
};
}
忽略throttle的方法名，按照调用方式不同，他也可以是debounce。主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间tag进行比较，用清空定时器的操作实现多余调用操作的舍弃。还有一点是用了闭包的机制，便于管理tStart变量，因为闭包的关系，tStart内存不会被回收，否则需要在全局定义该变量。
结尾具体怎么用呢，拿scroll事件举个例子：
window.addEventListenr("scroll",throttle(scrollHandle,delay,mustRunDelay),false);
大概就这意思，使用时候根据场景使用，mustRunDelay>0？防抖：节流。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/94634.html
摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。 废话不多说，直奔主题。 什么是throttle和debounce？ 这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...
摘要：主要实现在于通过异步操作的事件间隔，对于前后两次调用方法打时间进行比较，用清空定时器的操作实现多余调用操作的舍弃。 废话不多说，直奔主题。 什么是throttle和debounce？ 这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听resize、scroll、mouseover等事件时候的性能消耗。拿scroll来说，没有处理时滑动一次滚动条scroll事件会触发多...
摘要：起因面试被问到了节流和防抖动自己对这两个的概念比较模糊都不知道回答了什么鬼从语文和英语学起首先先看字面意思节流的意思就是水龙头关小点频率不要那么高防抖动这根弹簧你不要来回蹦了我就要你最后停下来的没有发生形变的那一刻举个例子节流在改变窗口大小 起因 面试被问到了节流和防抖动, 自己对这两个的概念比较模糊, 都不知道回答了什么鬼 从语文和英语学起 首先, 先看字面意思:节流(throttl...
摘要：所以针对此类事件则需要进行节流，或者防抖动处理。节流判断是否已空闲，如果在执行中，则直接函数节流二防抖对于一定时间段内的连续的函数调用，只执行一次原理其实就是一个定时器，当我们触发一个事件时，让这个事件延迟一会在执行。 在浏览器dom事件里面，一些事件会随着用户的操作不间断的触发，比如：为一个元素绑定拖拽事件，为页面绑定resize事件（重新调整浏览器窗口大小），页面滚动。如果dom操...
阅读 2886·2021-11-17 09:33
阅读 3660·2021-11-16 11:42
阅读 3487·2021-10-26 09:50
阅读 1315·2021-09-22 15:49
阅读 3044·2021-08-10 09:44
阅读 3667·2019-08-29 18:36
阅读 3923·2019-08-29 16:43
阅读 2207·2019-08-29 14:10
