九乡新闻网马云面相:【分享】JS事件触发延迟
来源：百度文库 编辑：九乡新闻网 时间：2024/07/07 12:47:31
【分享】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毫秒触发
----------------------------分割线 下面是帮别人解决疑惑的--------------------------------------------------
这里是给你测试上面代码的地方！
划过的时候this指向window，所以this.id无效
划离this指向ccc这个对象本身 所以this.id 弹出ccc
如果你还不了解apply建议去看看关于apply的一些文章
分类:JavaScript
标签:javascript,事件延迟,延迟执行
感谢糖粒子 指证 延迟执行，改成 触发延迟。还有他的思路。
效果说明：为了避免用户鼠标无意识划过，而触发事件。浪费客户端资源。
思路：当用户划过 设置变量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毫秒触发
----------------------------分割线 下面是帮别人解决疑惑的--------------------------------------------------
这里是给你测试的代码
划过的时候this指向window，所以this.id无效
划离this指向ccc这个对象本身 所以this.id 弹出ccc
如果你还不了解apply建议去看看关于apply的一些文章
划过的时候this指向window，所以this.id无效
划离this指向ccc这个对象本身 所以this.id 弹出ccc
如果你还不了解apply建议去看看关于apply的一些文章
这里是给你测试上面代码的地方！
划过的时候this指向window，所以this.id无效
划离this指向ccc这个对象本身 所以this.id 弹出ccc
如果你还不了解apply建议去看看关于apply的一些文章
分类:JavaScript
标签:javascript,事件延迟,延迟执行
【分享】JS事件触发延迟
后台调用JS 触发指定按钮
触发事件编辑器解析
C# 窗体关闭时可以触发的事件
js动态给对象onclick事件赋值,动态传参数
JQuery触发Checkbox的change事件 - 维子的日志 - 网易博客
json.js
JS 日历
采穗圃js
常用js
CListCtrl触发MeasureItem
项目立场 延迟测试
全球最震惊的“艳照门”事件大盘点！[分享]
JSON.js test
js 确认对话框
JS操作cookie
Js与CSS工具
Node.js binaries download
js showModalDialog参数传递
js 菜单标签示例
node.js入门
面试中的自我介绍JS
js正则大全
js客户端校验