一个名词一个技巧之函数节流

看个实例先

• 实现一个逻辑：当在input中输入内容的时候，将输入的内容显示到一个DIV里面
• html 文件

<input type="text" value=""/>
<div class="inputText"></div>

• js文件

var count = 0 
$("input").on("input",function(e){
      count && clearTimeout(count)
      count = setTimeout(function(){
           $(".inputText").html( $(e.target).val())
      }, 1000)
})

术语解释

• 看完上面代码，你肯定在平时工作中有用到过咯（没有？怎么可能！）

函数节流

• 定义：某个函数在一定时间间隔内只执行一次，也可以理解为把某个时间间隔内执行的函数合并为一个函数执行

定义一个节流函数

• 定义一个函数名为throttle的函数

var count = null
function throttle (callback, delay) {
    count && clearTimeout(count)
    count = setTimeout(callback, delay)
}
$("input").on("input",function(e){
    throttle(function(){
         $(".inputText").html( $(e.target).val())
    }, 1000)
})

• 上述函数有个问题，多了一个全局变量count，使用闭包改进一下函数

function throttle (callback, delay) {
    var count = null
    return (function() {
        count && clearTimeout(count)
        count = setTimeout(callback, delay)
    })()
}

• 按理说这个函数已经很完美了，但是只是理论上的完美，在实际操作中会出现一种情况，如上例：输入框一直在输入文字，文字就一直不会显示出来。我们需要做一个处理：使得文字在超过某个时间间隔后要输出一次。

function throttle (callback, delay, wait) {
    var count = null
    var start = null
    return function() {
        var now = +new Date()
        var context = this
        var args = arguments
        if ( !start ) {
            start = now
        }
        if ( now - start > wait ) {
            count && clearTimeout(count)
            start = now
            callback.apply(this, args)
        } else {
            count && clearTimeout(count)
            count = setTimeout(function(){
                callback.apply(this, args)
            }, delay)
        }
    }
}
var f = throttle(function(e){
     $(".inputText").html($(e.target).val())
}, 1000, 2000)
$("input").on("input",function(e){
     f(e)
})