函数的防抖和节流

时间 2019-11-06

标签函数节流繁體版

原文原文链接

前言

在前端项目中，函数的防抖和节流应该算是身为一名合格的前端工程师必须掌握的知识了。前端

函数的防抖和节流的是什么

函数的防抖:事件完成某段固定的时长后执行相应的函数
函数的节流:事件执行期间每隔一段时间执行相应的函数
函数的防抖与节流的区别在我看来有点相似生活中快递和外卖的区别：
快递：一天中任什么时候间下的单通常都是晚上发货（固定时长）
外卖：下单后饭作好后（每隔一段时间）当即送餐

为何要掌握防抖和节流

函数节流（throttle）与函数防抖（debounce）都是能够限制函数的执行频次，根据不一样的场景来对执行频率进行限制，避免了函数触发频率太高致使的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。canvas

函数的防抖和节流应用实例与实现

防抖的应用
1.防抖通常咱们在搜索过滤功能中应用较多，若是只是监听搜索框的变化来搜索那搜索的频率会太高，致使页面抖动。所以咱们须要限制搜索次数，等到输入最后一次（也多是中间暂停的某次）间隔0.5秒后在执行搜索，这样就能控制搜索的频率了。浏览器

2.表单重复提交前端工程师

3.滚动刷新
实例代码1：闭包

var timer = null
   function debounce(fn,time){
        //触发频率小于500ms是则清除上次未执行的
        clearTimeout(time)
        setTimeout(function(){
            console.log('====执行=====')
            fn()
        },time)
   }
   //监听搜索input change事件
   element.addEventListener("input", function(event) {
    debounce(searchFunc,500)
   })
   //搜索
   searchFunc(){
       console.log('====serch=====')
   }

实例代码2-闭包实现：前端优化

//待完善

节流的应用函数

1.canvas画笔功能优化

2.页面元素的拖拽code

实例代码1：事件

var startTime = 0
function throttle(fn,time){
    let nowTime = (new Date()).valueOf()
    if(nowTime-startTime > time){
        fn()
        startTime = nowTime
    }
}

document.addEventListener("mousemove",function(){
  //每隔1秒执行一次drag
   throttle(drag(),1000)
});
function drag(){
   console.log('=====执行=====')
}

实例代码2-闭包实现：

//待完善

总结

在页面负载比较大的状况下，如何减小对浏览器内存的消耗是前端优化的必需要考虑到的。而防抖与节流的概念可让咱们极大的节约对浏览器内存的消耗，因此掌握防抖与节流是前端必备技能之一。