函數節流的目的
從字面上就可以理解，函數節流就是用來節流函數從而一定程度上優化性能的。例如，DOM 操作比起非DOM 交互需要更多的內存和CPU 時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起，有時候甚至會崩潰。尤其在IE 中使用onresize 事件處理程序的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize 事件處理程序內部如果嘗試進行DOM 操作，其高頻率的更改可能會讓瀏覽器崩潰。又例如，我們常見的一個搜索的功能，我們一般是綁定keyup事件，每按下一次鍵盤就搜索一次。但是我們的目的主要是每輸入一些內容搜索一次而已。爲了解決這些問題，就可以使用定時器對函數進行節流。
函數節流的原理
某些代碼不可以在沒有間斷的情況連續重複執行。第一次調用函數，創建一個定時器，在指定的時間間隔之後運行代碼。當第二次調用該函數時，它會清除前一次的定時器並設置另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其替換爲一個新的定時器。目的是只有在執行函數的請求停止了一段時間之後才執行。
例如瀏覽器窗口大小的改變或者搜索功能的實現
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
function throttle(method,delay,duration){
var timer=null,begin=new Date();
return function(){
var context=this,args=arguments,current=new Date();
clearTimeout(timer);
if(current-begin>=duration){
method.apply(context,args);
begin=current;
}else{
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
}
window.onresize=throttle(resizehandler,100,200);
</script>
</body>
</html>