函数防抖和函数节流
2018-08-28 17:49
483 查看
函数防抖(debounce)
当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间
如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)
函数节流(throttle)
预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期
保证如果电梯第一个人进来后,10秒后准时运送一次,这个时间从第一个人上电梯开始计时,不等待,如果没有人,则不运行
函数防抖(debounce)
[code]function _debounce(fn,wait){ var timer = null; return function(){ clearTimeout(timer) // 清除未执行的代码,重置回初始化状态 timer = setTimeout(()=>{ fn() },wait) } } function fn(){ console.log(1) } window.onscroll = _debounce(fn,500)
优化
[code] function _debounce(fn,wait,time){ var timer = null; var pre = null; return function (){ var now = +new Date(); if(!pre) pre = now if(now - pre > time){ //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话,就主动执行一次 clearTimeout(timer); fn(); pre = now; }else{ clearTimeout(timer); timer = setTimeout(function(){ fn(); },wait) } } } function fn(){ console.log(1) } window.onscroll = _debounce(fn,500,2000)
函数节流(throttle)
[code] function _throttle(fn, time) { let timer, firstTime = true; return function (){ if(firstTime) { fn(); firstTime = false } if(timer){return false} timer = setTimeout(function(){ clearTimeout(timer) fn(); timer = null },500) } } function fn(){ console.log(1) } window.onscroll = _throttle(fn,500)
阅读更多
相关文章推荐
- 节流或防抖:控制函数的执行
- JS奇淫巧技:防抖函数与节流函数
- js函数防抖、节流实现
- 函数防抖与节流
- [转载]函数节流与函数防抖
- 节流函数和防抖函数学习
- 防抖函数和节流函数小列
- js函数节流和防抖
- 函数节流和防抖
- 函数节流与函数防抖
- js中连续触发事件的稀释方法(函数节流、函数防抖、标识变量)
- 页面优化之高性能函数防抖与节流
- 函数节流 + 函数防抖
- 事件委托、函数节流及防抖
- JavaScript小知识点(二):函数防抖和节流
- JS函数节流和函数防抖问题分析
- 性能优化之——节流和防抖
- JavaScript 频繁发射事件处理的优化 --- 函数节流/事件稀释
- js整频滚动展示效果(函数节流鼠标滚轮事件)
- JavaScript 节流函数 Throttle 详解