标签：运行 升级 ott time 间隔 OLE window out listen
有一些浏览器事件我们不希望它很频繁的触发，如调整窗口大小(onresize)、监听滚动条滚动(onscroll)，如果这些监听事件需要调用接口的话一秒内可能会调用上百次，这样坑定是有问题的。
如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。
function debounce(fn,wait){ var timer = null; return function(){ clearTimeout(timer) timer = setTimeout(()=>{ fn() },wait) } } function log(){ console.log(1) } window.addEventListener(‘scroll‘, debounce(log, 1000));
保证如果电梯第一个人进来后，10秒后准时运送一次，这个时间从第一个人上电梯开始计时，不等待，如果没有人，则不运行。
仔细想想，上面的防抖方式还是有一定的缺点。如果页面很长，我们一直在滚动页面，那log方法就一直不会被执行。所以我们可以升级一下上述的防抖方法。
function throttle(fn,wait,time){ var previous = null; //记录上一次运行的时间 var timer = null; return function(){ var now = +new Date(); if(!previous) previous = now; //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话，就主动执行一次 if(now - previous > time){ clearTimeout(timer); fn(); previous = now;// 执行函数后，马上记录当前时间 }else{ clearTimeout(timer); timer = setTimeout(function(){ fn(); },wait); } } } function log(){ console.log(1) } window.addEventListener(‘scroll‘, throttle(log, 1000, 2000));
标签：运行 升级 ott time 间隔 OLE window out listen
原文地址：https://www.cnblogs.com/javascriptvue/p/9159759.html
