【分享】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的一些文章

转载于:https://www.cnblogs.com/idche/archive/2010/05/12/1734006.html