【分享】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
把鼠标放在上面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的一些文章
划过的时候this指向window，所以this.id无效
划离this指向ccc这个对象本身 所以this.id 弹出ccc
如果你还不了解apply建议去看看关于apply的一些文章
