函数节流与防抖

函数防抖(debounce)

函数防抖的定义

事件触发,等待一段时间,假如事件在时间内不再触发,则调用函数,假如触发重新计算时间.

原理

设置定时器为null,假如定时器存在则清空,再设置新的定时器,事件结束后触发函数,并清空定时器.

代码

function debounce(fn,wait){
    let timer = null;
    return ()=>{
         if(timer){
             clearTimeout(timer);
         }
         timer = setTimeout(()=>{
             fn()
            timer = null
         },wait)
    }
}

应用场景

1. 每次resize或者scroll触发统计事件
2. 文本输入调用ajax

函数节流(throttle)

函数节流的定义

一段时间内只能调用一次函数(技能CD)

原理

使用时间戳来判断是否到回调执行时间,记录上次执行时间,当当前时间与上次执行时间间隔大于时间戳则执行回调.

设置状态doing,触发事件,状态变为true,一段时间后变为false.只有状态为false才回调函数.

代码

//实现方式1
function throttle(fn,gapTime){
    let lastTime = 0;
    return ()=>{
        let currTime = new Date();
        if(currTime - lastTime > gapTime || !lastTime){
            fn();
            lastTime = currTime
        }
    }
}

//实现方式2
function throttle(fn,gapTime){
    let doing = false;
    return ()=>{
        if(doing === false){
        fn()
        doing = true
        setTimeout(()=>{
            doing = false
        },gapTime)
    }
  }
}

应用场景

1. DOM元素拖动
2. Canvas
3. 计算鼠标移动距离
4. 自动联想
5. 滚动到底部加载数据