性能提速：debounce（防抖）、throttle（节流／限频）

debounce与throttle是用户交互处理中经常使用到的性能提速方案，debounce用来实现防抖动，throttle用来实现节流（限频）。那么这两个方法究竟是什么（what）？为什么要用（why－解决什么问题）？具体的实现原理，以及函数运行过程是怎样的呢（how）？

一、what?

连续操做：两个操做之间的时间间隔小于设定的阀值，这样子的一连串操做视为连续操做。

debounce（防抖）：一个连续操做中的处理，只触发一次，从而实现防抖动。
throttle：一个连续操做中的处理，按照阀值时间间隔进行触发，从而实现节流。

图1 debounce、throttle运行图

如图所示，其中delay=4，因为红色操做序列与绿色操做序列之间的时间间隔小于delay，因此这两个序列被视为一个连续操做行为。

• debounceTail：执行操做在连续操做完成以后，触发；
• debounceStart：执行操做在连续操做完成以前，触发；
• throttle：在一个连续操做行为中，每间隔delay的时间触发1次。

结合运行图，能够更好的理解debounce、throttle的做用。

二、why？

经常使用情景：

• a、scroll事件：当页面发生滚动时，scroll事件会被频繁的触发，1s触发可高达上百次。在scroll事件中，若是有复杂的操做（特别是影响布局的操做），将会大大影响性能，甚至致使浏览器崩溃。因此，对其进行防抖、限频很重要。
• b、click事件：用户进行click事件时，有可能连续触发点击（用户本意并不是双击）。该操做有多是不当心屡次连续点击，也多是页面情况很差的状况下，期待尽快获得反馈的有意行为；但这样的操做，反而会加重性能问题，所以也有必要考虑防抖、限频。
• c、input事件：如sug等须要经过ajax及时得到数据的状况，须要进行限频，防止频繁的请求发生，减小服务器压力的同时，提升页面响应性能。
• d、touchmove事件：同scroll事件相似。

还有许多其余业务场景会出现频繁操做的状况，不一一列举。debounce可用于：防止用户的屡次click提交；scroll下拉刷新时，同一位置屡次请求数据等。throttle可应用于，scroll设置定位等的频繁位置计算；拖拽的频繁位置计算等。

三、how？

怎样实现？其代码实现以下：

// 防抖 且首次执行
// 采用原理：第一操做触发，连续操做时，最后一次操做打开任务开关（并不是执行任务），任务将在下一次操做时触发）
function debounceStart(fn, delay, ctx) {
    let immediate = true 
    let movement = null
    return function() {
        let args = arguments
        
        // 开关打开时，执行任务
        if (immediate) {
            fn.apply(ctx, args)
            immediate = false
        }
        // 清空上一次操做
        clearTimeout(movement)
        
        // 任务开关打开
        movement = setTimeout(function() {
            immediate = true
        }, delay)
    }
}

// 防抖 尾部执行
// 采用原理：连续操做时，上次设置的setTimeout被clear掉
function debounceTail(fn, delay, ctx) {
    let movement = null
    return function() {
        let args = arguments
        
        // 清空上一次操做
        clearTimeout(movement)
        
        // delay时间以后，任务执行
        movement = setTimeout(function() {
            fn.apply(ctx, args)
        }, delay)
    }
}

// 限频，每delay的时间执行一次 
function throttle(fn, delay, ctx) {
    let isAvail = true
    return function() {
        let args = arguments
        
        // 开关打开时，执行任务
        if (isAvail) {
            fn.apply(ctx, args)
            isAvail = false
            
            // delay时间以后，任务开关打开
            setTimeout(function() {
                isAvail = true
            }, delay)
        }
    }
}
    
// 调用
btn.onclick = debounceStart(function(event) {
    console.log('100ms')
}, 100, this) 
window.onscroll = throttle(function(event) {
    console.log('100ms')
}, 100, this)

如上代码，使用了闭包，将isAvail等父级变量存储在了内存当中，实现状态切换。同时，经过apply将任务函数的上下文ctx（在类、对象内操做时，其做用更明显）；参数arguments（如调用中的event），存入最终的任务执行函数当中。经过timer的clear和set来控制任务的触发，同时需留意任务执行与任务开关打开的区别。任务执行是timer到达，就将触发任务；任务开关打开是timer到达时，只将状态变动，须要用户的再一次操做，才能实施真正的任务触发。

经过控制台能够看到，不进行限频时，scroll在1s内能够触发高达上100次，增长了限频以后，就将scroll的触发控制在必定的范围内。

四、思考

图2 throttle运行标示图

在实际的使用场景当中，咱们会发现，用户最后一次操做并无后续的处理，也就是最后一次操做的状态将丢失。在某些应用场景当中，可能形成状态处理不许确。如经过scroll事件判断是否到达页面底部，若是到达，则提示用户。使用throttle方法进行节流，在到达底部以前，小于delay的时间间隔内，触发了一次位置判断操做；下一次触发将在delay时间以后，但在那以前，scroll事件已经结束了，因此没法获取最后scroll到底部的位置，也就不会触发提示。

如何优化呢？
能够结合debounceTail的功能，其能够实现最后一次操做的捕捉，如图所示：

图3，throttle增强运行图

其代码以下：

// 限频，每delay的时间执行一次
function throttle(fn, delay, ctx) {
    let isAvail = true
    let count = false
    let movement = null
    return function() {
        count = true
        let args = arguments
        if (isAvail) {
            fn.apply(ctx, args)
            isAvail = false
            count = false
            setTimeout(function() {
                isAvail = true
            }, delay)
        }
        if (count) {
            clearTimeout(movement)
            movement = setTimeout(function() {
                fn.apply(ctx, args)
            }, 2 * delay)
        }
    }
}

增长movement来记录和清除最终操做状态；用count来避免与限频的重合；如此便实现了捕获最终操做状态的限频操做。

tips：其中大量使用setTimeout()的操做，在高级浏览器中，可使用requestAnimationFrame来替代setTimeout操做，从而提升性能。requestAnimationFrame的原理、优点及低版本的兼容，能够查阅张鑫旭的博客，写得很详细：CSS3动画那么强，requestAnimationFrame还有毛线用？