防抖和节流

（函数防抖和节流是什么意思？分别用于什么情况下)

http://www.jb51.net/article/105601.htm

---

一、函数防抖

1、什么是函数防抖

函数去抖（debounce）：就是让某个函数在上一次执行后，满足等待某个时间内不再触发此函数后再执行，而在这个等待时间内再次触发此函数，等待时间会重新计算，直到该函数在一定间隔内没有被调用时，才开始执行被调用方法。

2、应用场景

• 用户注册时候的手机号码验证和邮箱验证
• 搜索框(input)

3、通用写法

// 去抖动
export const debonceFn = (interval, cb) => {
    let timeout = null
    return function() {
        clearTimeout(timeout)
        timeout = setTimeout(() => cb.apply(this, arguments), interval)
    }
}
// 示例1
window.addEventListener('resize', debonceFn(250, () => {
   window.location.reload()
}))
// 示例2
doResizeEffect = () => {
    const fn = debonceFn(250, () => {
        const height = document.getElementsByClassName('stocks-commit-handicap')[0].clientHeight
        const chartHeight = calBodyHeight() - 65 - 11
        const dealHeight = chartHeight - height
        this.setState({
            chartHeight: chartHeight,
            dealHeight: dealHeight
        })
    })
    window.addEventListener('resize', fn)
    return () => {
        window.removeEventListener('resize', fn)
    }
}

4、举例

• 应用场景：假设我们网站有个搜索框，用户输入文本我们会自动联想匹配出一些结果供用户选择。

• 我们可能首先想到的做法就是监听keypress事件，然后异步去查询结果。

• 这个方法本身是没错的，但是如果用户快速的输入了一连串的字符，假设是10个字符，那么就会在瞬间触发了10次的请求，这无疑不是我们想要的。

• 我们想要的是用户停止输入的时候才去触发查询的请求，这时候函数防抖可以帮到我们。

// 简单示例
window.addEventListener('resize',function(e){
    var t;
    return function(){
        if(t) clearTimeout(t);
        t = setTimeout(function(){
            // do something...
        },500);
    }
}());

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
}; 

---

二、函数节流

1、什么是函数节流

函数节流（throttle）：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。
即每间隔某个时间去执行某函数，避免函数的过多执行，这个方式就叫函数节流

2、应用场景

• window对象的resize、scroll事件

• 拖拽时的mousemove事件

• 射击游戏中的mousedown、keydown事件

• 文字输入、自动完成的keyup事件

3、通用写法

 // 函数节流
export const throttleFn = (interval, cb) => {
    let oldDate = 0
    return function() {
        let newDate = new Date()
        if (newDate - oldDate > interval) {
            oldDate = newDate
            return cb.apply(this, arguments)
        }
    }
}
// 用法示例——绑定按键
bindKey = (table) => {
    // 节流时间间隔
    let interval = 66
    let throttleEvent = throttleFn(interval, (e) => {
        const keyCode = e.keyCode
        if (keyCode === 38) {
            // up
            this.upHandler(table)
        }
        if (keyCode === 40) {
            // down
            this.downHandler(table)
        }
        if (keyCode === 37) {
            // left
            this.leftHandler(table)
        }
        if (keyCode === 39) {
            // right
            this.rightHandler(table)
        }
        if (keyCode === 13) {
            // enter
            this.enterHandler(table)
        }
    })
    window.onkeydown = (e) => {
        e.preventDefault()
        const keyCode = e.keyCode
        throttleEvent(e)
    }
}

4、举例说明

• 应用场景：滚动浏览器滚动条的时候，更新页面上的某些布局内容或者去调用后台的某接口查询内容。

• 同样的，如果不对函数调用的频率加以限制的话，那么可能我们滚动一次滚动条就会产生N次的调用了。

• 但是这次的情况跟上面的有所不同，我们不是要在每完成等待某个时间后去执行某函数，而是要每间隔某个时间去执行某函数，避免函数的过多执行。

// 简单的节流函数
function throttle(func, wait, mustRun) {
    var timeout,
        startTime = new Date();

    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();

        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if(curTime - startTime >= mustRun){
            func.apply(context,args);
            startTime = curTime;
        // 没达到触发间隔，重新设定定时器
        }else{
            timeout = setTimeout(func, wait);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,500,1000));

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
   if(!canRun){
   // 判断是否已空闲，如果在执行中，则直接return
     return;
   }
   canRun = false;
   setTimeout(function(){
     console.log("函数节流");
     canRun = true;
   }, 300);
};