js函数节流

Posted 2020-10-20 for_tomorrow

　　函数节流背后的基本思想是指，某些代码不 可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后执行代码。当第二次调用该函数时，它会清楚前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

//如果没有第二个参数，那么就在全局作用域内执行该方法

function throttle(method,context){

　　clearTimeout(method.tId);

　　method.tId=setTimeout(function(){

　　　　method.call(context);

　　},100);

}

 

function resizeDiv(){

　　var div=document.getElementById(‘myDiv‘);

　　div.style.height=div.offsetWidth+‘px‘;

};

window.onresize=function(){

　　throttle(resizeDiv);

};

 

另一种写法（不推荐）

window.onresize=function(){

　　var div=document.getElementById(‘myDiv‘);

　　div.style.height=div.offsetWidth+‘px‘;

};

 

这段非常简单的例子有两个问题可能会造成浏览器运行缓慢。首先，要计算offsetWidth属性，如果该元素或者页面上其他元素有非常复杂的css样式，那么这个过程将会很复杂。其次，设置某个元素的高度需要对页面进行回流来令改动生效。如果页面有很多元素同时应用了相当数量的css的话，这有需要很多计算。

以上举的例子是改变窗口大小，再比如检索功能，也涉及到节流。

注：只要代码是周期性执行的，都应该使用节流。

参考书籍：《javascript高级程序设计（第3版）》