摘要：函数节流保证如果电梯第一个人进来后，秒后准时运送一次，这个时间从第一个人上电梯开始计时，不等待，如果没有人，则不运行。
前言
有一些浏览器事件我们不希望它很频繁的触发，如调整窗口大小(onresize)、监听滚动条滚动(onscroll)，如果这些监听事件需要调用接口的话一秒内可能会调用上百次，这样坑定是有问题的。
函数防抖（debounce）
如果有人进电梯（触发事件），那电梯将在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));
函数节流（throttle）
保证如果电梯第一个人进来后，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));
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108070.html
摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。 前言 陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。 详解 在前端开发中，我们经常会碰到一些会持...
摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。 前言 陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。 详解 在前端开发中，我们经常会碰到一些会持...
摘要：函数防抖简单实现模拟请求获取函数的作用域和变量清除定时器节流名词解释连续执行函数，每隔一定时间执行函数。效果函数防抖是某一段时间内只执行一次函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。 防抖（debounce） 名词解释：在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。 使用场景：以百度输入框例，比如你要查询...
摘要：封装方法也比较简单，书中对此问题也进行了处理使用定时器，让函数延迟秒后执行，在此秒内，然后函数再次被调用，则删除上次的定时器，取消上次调用的队列任务，重新设置定时器。 在实际开发中，函数一定是最实用最频繁的一部分，无论是以函数为核心的函数式编程，还是更多人选择的面向对象式的编程，都会有函数的身影，所以对函数进行深入的研究是非常有必要的。 函数节流 比较直白的说，函数节流就是强制规定一...
摘要：隆重请出主角防抖与节流。防抖与节流的异同相同都是防止某一时间段内，函数被频繁调用执行，通过时间频率控制，减少回调函数执行次数，来实现相关性能优化。参考文章分钟理解的节流防抖及使用场景函数防抖和节流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇课题，或许早已是烂大街的解读文章。不过春招系列面试下来，不少伙伴们还...
摘要：防抖与节流源码学习最近自己撸了一个轮播图，在点击切换的时候，为了寻求更好的用户体验，引入了节流，在此记录对源码的学习过程源码来源防抖函数防抖使用场景现在我们需要做一个搜索框，当用户输入文字，执行事件的时候，需要发出异步请求去进行结果查询。 防抖与节流（源码学习） 最近自己撸了一个轮播图，在点击切换的时候，为了寻求更好的用户体验，引入了节流，在此记录对源码的学习过程源码来源：unders...
阅读 3399·2021-10-08 10:15
阅读 5437·2021-09-23 11:56
阅读 1466·2019-08-30 15:55
阅读 444·2019-08-29 16:05
阅读 2723·2019-08-29 12:34
阅读 2035·2019-08-29 12:18
阅读 913·2019-08-26 12:02
阅读 1650·2019-08-26 12:00
