【分享】JS事件触发延迟

　　感谢 糖粒子 指证 延迟执行，改成 触发延迟。还有他的思路。

效果说明：为了避免用户鼠标无意识划过，而触发事件。浪费客户端资源。

    思路：当用户划过 设置变量i=0;

             每过100毫秒 i++

           当i==10的时候就刚好 是1秒。就触发事件。

　　    否则用清楚setInterval i不在++；

    哈哈。不知道我描述清楚没。 

• 代码：

• var delay=function(t,fn){
              var i=0,
                  j=10,
                  t=(t*1000)/j,
                  //把延迟时间平均分成10等份
                  _this=this,
                  //解决this绑定问题，所以调用delay函数的时候,请处理好this指向本身对象
                  d=setInterval(function(){
                                             i++;
                                          if(i==j){
                                              clearInterval(d);
                                              fn.apply(_this);
                                              };
                                         },t);
                  _this.onmouseout=function(){
                          clearInterval(d);
                      };
          }

   

• 测试：

这是一个测试DIV
把鼠标放在上面2秒后会弹出他的ID

 

    今天早上的时候我坐在公车上突然想到这个问题的时候。发现我昨天写的可能效率不高。于是有下面的想法，可能要比上面的好。

 

    var delay=function(t,fn){//接收两个参数 t延迟时间秒为单位，fn要执行的函数
            var _this=this,//请注意还要个免费的this参数可以让这个delay更完美
                d=setInterval(function(){
                                       fn.apply(_this);
                                       },t*1000);
                _this.onmouseout=function(){
                        clearInterval(d);
                    };
        }
//-----上面是整个延迟时间函数
//主要改进，不在循环调用一个函数来累加i，来判断时间。尔直接使用
//setInterval 时间延迟，否则clearInterval 就可以带到效果
//不知道是否会有BUG ，还请高手指点

    document.getElementById("aaaaa").onmouseover=function(){
        delay.apply(this,
                    [0.5,function(){alert(this.id)}]
                    );
        };
//昨天有朋友给我短消息说
// 这个什么意思(_this=this,解决this绑定问题，所以调用delay函数的时候,请处理好this指向本身对象)
//哪我就在啰嗦两句；
//首先请看3个地方
//fn.apply(_this); 回调函数
//delay.apply(this,调用delay的地方
//                   [0.5,function(){alert(this.id)}]
//                  );
//alert(this.id)} 最后弹出对象的ID
//为什么最后可以使用this.id来获取对象的ID呢。这说明 当前的this对象指向了触发时间的对象（也就是aaaaaDIV）
//我在调用delay函数的时候使用 apply 让delay调用的this指向aaaaaDIV
//然后把this又赋值给_this，主要是方便后面使用。
//最后在调用正则的事件函数的时候使用 fn.apply(_this); 把fn的this又指向了_this
//那么其实就有 this=_this=this=aaaaaDIV
//表达能力不好可能没说清除。后面我写个例子给你吧。

 

这里测试第2个新的方法，快速划过不会触发，停留500毫秒触发

----------------------------分割线 下面是帮别人解决疑惑的--------------------------------------------------

 

 

<div style=" width:500px; height:200px; border:1px solid #999;" id="ccc" >这里是给你测试的代码
<br/>划过的时候this指向window，所以this.id无效<br/>
划离this指向ccc这个对象本身 所以this.id  弹出ccc<br/>
如果你还不了解apply建议去看看关于apply的一些文章<br/>
</div>
<script type="text/javascript">
    var dd=function(){
            alert(this.id);
        }
    document.getElementById("ccc").onmouseover=function(){
            dd();
        }
    document.getElementById("ccc").onmouseout=function(){
            dd.apply(this);
        }
</script>

 

这里是给你测试上面代码的地方！
划过的时候this指向window，所以this.id无效
划离this指向ccc这个对象本身 所以this.id 弹出ccc
如果你还不了解apply建议去看看关于apply的一些文章