[JavaScript]使用setTimeout减少多余事件-阿里云开发者社区

开发者社区> 吞吞吐吐的> 正文

[JavaScript]使用setTimeout减少多余事件

简介:
+关注继续查看

在浏览器上,某些事件的触发是非常频繁的,几乎是毫秒级的,最典型的就是document.onmousemove,而这么频繁的事件,往往都是弊大于利的。今天看到一个很好的解决办法,这里稍加改进成通用的方法,虽不能彻底解决问题,但是可以有效缓解,而且简单易行,核心代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//可进一步扩展为支持可传参的fn
var onFooEndFunc = function(fn) {
    var delay = 50; // 根据实际情况可调整延时时间
    var executionTimer;
    return function() {
        if (!!executionTimer) {
            clearTimeout(executionTimer);
        }
        //这里延时执行你的函数
        executionTimer = setTimeout(function() {
            //alert('123');
            fn();
        }, delay);
    };
};
下面以document.onmousemove为例,看看运行的效果,使用延时处理前,移动鼠标,会发现事件触发非常频繁,使用延时处理后,移动鼠标,事件就没那么频繁了。

    

上面只是以 document.onmousemove为例,还有很多其他DOM事件存在相同问题,例如onScroll, onMouseMove, onResize,同理,都可以用这个方法来解决,具体还可以看这里的例子,方法本质上都是一样的。


本文转自Justin博客园博客,原文链接:http://www.cnblogs.com/justinw/archive/2009/12/09/1619925.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C#.NET使用Task,await,async,异步执行控件耗时事件(event),不阻塞UI线程和不跨线程执行UI更新,以及其他方式比较
原文:C#.NET使用Task,await,async,异步执行控件耗时事件(event),不阻塞UI线程和不跨线程执行UI更新,以及其他方式比较 使用Task,await,async,异步执行事件(event),不阻塞UI线程和不跨线程执行UI更新   使用Task,await,async 的异步模式 去执行事件(event) 解决不阻塞UI线程和不夸跨线程执行UI更新报错的最佳实践,附加几种其他方式比较 由于是Winform代码和其他原因,本文章只做代码截图演示,不做界面UI展示,当然所有代码都会在截图展示。
3289 0
javascript:使用document.getElementById读取数据为空分析
  今天写个网页,想在页面加载onLoad时,动态显示由后台其他程序传来的数据时,用document.getElementById获取控件对象总是为空。但是检查了这个id确实是存在的。在网上查阅一番后才知道了其中的原因。
886 0
WPF 为资源字典 添加事件响应的后台类
原文:WPF 为资源字典 添加事件响应的后台类 前言,有许多同学在写WPF程序时在资源字典里加入了其它控件,但又想写事件来控制这个控件,但是资源字典没有CS文件,不像窗体XAML还有一个后台的CS文件,怎么办呢? 在工作时也遇到了这个问题,现在把它分享出来 比如说我们现在要写一个TabControl控件,在TabItem中有一个关闭按钮或其它按钮,这个按钮要能响应某个事件。
1082 0
ACCESS 触发器delete table事件变量使用及连续删除
    ACCESS的TABLE DELETE 事件触发后,会出现一个[旧]的记录,这条记录非常有用,可以用来作条件判断使用。     如下图的table event事件中,删除一条记录后,可以使用[旧]记录连接执行多个删除相关记录的操作。
582 0
JavaScript使用原型判断对象类型
1. constructor属性 在JavaScript创建对象(二)——构造函数模式中,我们说过可以使用对象的constructor属性判断对象的类型:p1.constructor === Person,可能当时就有细心的读者会想,我们并没有给这个对象添加过constructor,这个属性是从哪儿来的呢?讲过原型之后,我们知道这个属性是原型中的,所以一般重写原型时也都会把constructor补上。
1127 0
4852
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载