利用 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 }

 

转载于:https://www.cnblogs.com/lightnull/p/6159796.html