/**
*每个事件添加都要new一个对应的实例去使用，不可多个事件中使用同一个rdt实例
* const rdt = new Reduction();
* 写法一 rdt.debounce(1000,(data)=>{},data);
* 写法二 rdt.debounce(1000).then(()=>{});
*/
export const Reduction = function(){
let timer=null; let canRun= true;
/**
* 防抖
**/
const debounce = function(waiting=100,callback, data = {}) {
let debounceResolve;
const promise = new Promise((resolve)=> {
debounceResolve = resolve;
})
if(timer!=null) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(()=>{
callback && typeof callback === 'function' && callback.call(this, data); debounceResolve(); }, waiting);
return promise;
}
/**
* 节流
**/
const throttle = function(duration = 100, callback, data = {}) {
if(!canRun) return;
let throttleResolve; const promise = new Promise((resolve)=>{
throttleResolve = resolve;
})
canRun = false; setTimeout(()=>{
callback && typeof callback === 'function' && callback.call(this, data);
throttleResolve();
canRun = true;
}, duration);
return promise;
}
return {
debounce,
throttle
};
防抖动和节流本质是不一样的。
防抖动是将多次执行变为最后一次执行，
节流是将多次执行变成每隔一段时间执行。
结合应用场景
debounce
1.search搜索，用户在不断输入值时，用防抖来节约请求资源。
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
throttle
1.鼠标不断点击触发，mousedown，click,touchmove等(单位时间内只触发一次)
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来稀释函数执行频率
感谢，老铁的阅读，如果喜欢的,帮忙点个👍,你的支持我是前进的动力++
网友评论