JIA's blog

温故而知新

Home Archives Tags About

节流和防抖

2019-03-14 2 min read # js

一些用户频繁触发的事件操作，对于dom操作，资源加载等消耗性能的处理可能会导致页面卡顿，这时就需要用到函数节流（throttle）和函数防抖（debounce）

函数防抖

事件被触发n秒之后再执行，如果在这个n秒之内被再次触发，就重新计时

使用场景：

  • 做输入框自动补全提示（实时搜索），需要监听用户的输入行为，根据输入内容去请求后端接口，如果不做函数防抖的话，每次触发keyup就要请求一次，非常消耗性能
  • 拖拽

实现函数防抖：用setTimeout

function debounce(fn, delay){
    var timer;
    return function(e){
        var that =  this;
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.call(that, e)
        }, delay)
    }
}

function fn(args){
    console.log(args)
}
document.getElementById('debounce').addEventListener("click",function(e){
    debounce(click, 500)(e)
})

函数节流

预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行，不管函数触发的多频繁都会保证一个周期执行一次

使用场景：

  • 窗口resize
  • 页面滚动scroll

实现函数节流：

function throttle(fn, delay){
    let prev = 0;
    return function(args){
        let that = this;
        let now = Date.now();
        if(now - prev >= delay){
            fn.call(that, args);
            prev = now;
        }
    }
}
AzhA RSS