利用 setInterval 確定用戶的動作是否停止

最近遇到一個問題，對於某一個持續的動作，希望能夠知曉用戶何時停止這個動作，

比如說 我們通過註冊onresize事件，去監聽瀏覽器視窗變化的事件，在這個事件裡面，我們可能要執行大量的計算去確定視窗變化後的一個佈局

可惜的是，onresize事件，在視窗大小發生改變的時候就會觸發一次，像筆者這種喜歡拖來拖去的多動症患者，就會讓我們可憐的瀏覽器君，不停的去計算，去渲染，

這時候，瀏覽器君 是多麼迫切的想知道筆者什麼時候 結束這改變視窗的動作啊！

要是我們有一個狀態變數 status ，true 代表正在操作。false代表沒有操作。

那麼我們就巧妙的把判斷用戶的動作是否結束的問題轉換成去詢問某個變數的值是什麼了啊（真是機智的boy）。

 1 function test() {
 2     var isFree = true,isActive = true; 
 3     $(window).on('resize',function() {
 4         isActive = true; 
 5         if (!isFree) { 
 6             return;
 7         }
 8         isFree = false; //保證每次只會執行一次
 9         
10         function resizeAction(){} //邏輯代碼
11         
12         var n = 0;
13         var timer = setInterval(function(){
14             if (isActive) { //判斷事件是否被執行
15                 n = 0;
16                 isActive = false
17             } else if (++n > 2) { //當有300ms沒有操作的時候，就認為用戶已經停止行為了
18                 resizeAction();
19                 
20                 isFree = true; //狀態重置
21                 clearInterval(timer);
22             }
23         }, 100);
24         
25     });
26 }