JavaScript 函数节流

■知识点

    函数节流就是降低函数被调用的频率，主要是针对DOM事件暴露出的问题，提出的一种解决方案。例如，使用 resize、mousemove、mouseover、mouseout、keydown、keyup 等事件都会频繁地触发事件。如果这些事件的处理函数中包含大量的耗时操作，如Ajax谐求、数据库查询、DOM遍历等，如此高频的耗时操作可能会让浏览器崩溃，严重影响用户体验。

    例如，在大型网店平台的导航栏中，为了解决mouseover和mouseout移动过快时给浏览器处理带來 的负担，特别是减轻涉及Ajax调用给服务器造成的极大负担，都会进行函数节流处理。

■实例设计

设计思想：让代码在间断的情况下重复执行。实现方法：使用定时器对函数进行节流。

【实现代码】

//函数节流封装代码，参数method表示要执行的函数，delay表示要延迟时间，单位是毫秒

function throttle(method, delay) {

    var timer=null;                       //定时器句柄

    return function(){                    //返回节流函数

        var context=this, args=arguments; //上下文环境和参数对象

        clearTimeout(timer);              //先浩理未执行的函数

        timer=setTimeout(function() {     //重新定义定时器，记录新的定时器句柄

            method.apply(context,args);   //执行预设的函数

        },delay);

    }

}

【应用代码】

设计文本框的keyup事件和窗口的resize事件，在浏览器中拖动窗口，或者在文本框中输入字符，然后在控制台查看事件响应次数和速度。

<input id="search" type="text" name="search">

<script>

function queryData(text){ console.log("搜索："+ text);} 

var input = document.getElementByld("search");

input.addEventListener("keyup", function(event){queryData(this.value);}); 

var n=0;                 //记录响应次数

function f () {console.log("响应次数："+ ++n) ; }

window.onresize=f;

</script>

    通过观察可以发现，在拖动改变窗口的一瞬间，resize事件响应了几十次。如果在文本框中输入字符，keyup事件会立即响应，等不及用户输入完一个单词。

    现在，使用throttleO封装函数把上面的事件处理函数转换为节流函数，同时设置延迟时间为500毫秒。

input.addEventListener("keyup", function(event){ 

    throttle(queryData, 500)(this.value);

});

window.onresize=throttle(f, 500);

    最后再重新测试，会发现拖动一次窗口改变大小，仅响应一次，而在文本框中输入字符时，也不会立即响应，等了半秒钟后，才显示输入的字符。提示，完整示例请参考本节示例源码。