函数的节流

今天小马哥让优化代码，当input 框输入数字时，会触发一系列的运算及逻辑处理，watch 监控输入变化，当input的value 有改变时，则会疯狂请求处理运算的接口，这样一来，这种处理方式则可能增加浏览器重绘和回流次数，进而增加了浏览器的负担，服务器也很疲惫，一开始我只是很肤浅的找代码中接口的调用次数，位置，以及网络请求多次的问题。然而，事情并不是这么简单，所以，今天我在这里分享一下，关于节流的问题。

1.首先我可能不会直入主题，女孩子一般喜欢拐弯抹角的说一个问题，我总觉得懂得拐弯肯定会多收获不少的风景。不罗嗦了，先讲一个常见的通过双向绑定来实现的搜索功能。
我直接贴代码了。

<input type="text" id="search" name = "search"/>
<p id='textId'></p>

<script>
var input = document.getElementById('search');
var textId = document.getElementById('textId');
function queryData(text){
console.log(text,'text');
textId.innerHTML =text;
}

input.addEventListener('keyup',function(event){
    console.log(event,'event');
    queryData(this.value);
})

</script>

这段代码浏览器执行的结果是这样的：

image.png

不要介意我的突然表白，这些都不重要，重要的是，你发现没有，这就是一个典型的双向数据绑定的原生实现。嘿嘿，不慌，问题来了，你会发现，我没输入一个字符的时候，都会掉一次queryData这个方法，这可能不是我特别想要的，我觉得有点繁琐，我想无论我打多少个字符，在特定的时间内，只需要给我输出一到两个就好，否则的话在每次改变input value 值时浏览器可能都会发生重绘，性能肯定是不行的，为了优化性能，我能开始进行第2个问题的讲解。
2.节流函数的实现原理。
上代码：
// 使用节流的情况
var input = document.getElementById('search');
var textId = document.getElementById('textId');
function queryData(text){
textId.innerHTML = text;
}

input.addEventListener('keyup',function(event){
    throttle(queryData,null,500,this.value);
})
function throttle(fn,context,delay,text){
    clearTimeout(fn.timeoutId);
    fn.timeoutId = setTimeout(function(){
        fn.call(context,text);
    },delay);
}

说明：li'yong'd'n
这段代码浏览器执行的结果是这样的：

image.png

由运行结果可以看出，节流就是我们通过在特定的时间段内，来控制调用函数的次数，进而减少浏览器的重绘与回流。这只是个比较基础的，原理性的实现函数节流的一种方案，那么如果我们像继续优化，请看第3部分的讲解。

3.到一定时间间隔之后，queryData函数必然会被调用，但是又不是频繁的调用。这既达到了节流的目的，又不会影响用户体验。
上代码：
// 使用节流的情况
var input = document.getElementById('search');
var textId = document.getElementById('textId');
function queryData(text){
textId.innerHTML = text;
console.log(text,'text');
}

input.addEventListener('keyup',function(event){
    throttle(queryData,null,600,this.value);
})
function throttle(fn,context,delay,text,centerTime){
    clearTimeout(fn.timeoutId);
    fn.currentTime = new Date();
    if(!fn.startTime){
        fn.startTime = fn.currentTime;
    }

    if(fn.currentTime - fn.startTime > centerTime){
       fn.call(context,text);
       fn.startTime = fn.currentTime;
    }else{
         fn.timeoutId = setTimeout(function(){
                fn.call(context,text);
            },delay);
    } 
}

我来讲解一下：加了一个时间间隔的比较，如果在那个时间间隔内触发input 框里的东西，

image.png