JavaScript 高级技巧——“高级定时器”的注意要点

rubyshen 发布于2019-08-19 17:44 / 1360人阅读

摘要：为了规避这个问题，可以使用定时器对事件处理程序进行节流。当第二次调用该函数时，它会清除前一次的定时器，并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。

高级定时器

为了解决setInterval的一些执行问题，下面是采用链式setTimeout的方式来规避：

</>复制代码 
setTimeout(function() {
    // add code here
    setTimeout(arguments.callee, interval);
}, interval);

避免使用arguments.callee：

</>复制代码 
setTimeout(function func () {
    // body...
    setTimeout(func, interval);
}, interval);

Yielding Processes

脚本长时间运行的原因：过长的、过深嵌套的函数调用；进行大量的处理循环。
在展开循环之前，你需要考虑两个重要的问题：

该出事是否必须同步完成？

数据是否必须按顺序完成？

当你发现有些循环占用大量的事件，同时对上述两个问题答案都是否，那么可以使用定时器来分隔这个循环。

</>复制代码 
setTimeout(function() {
    //取出下一个条目处理
    var item = array.shift();
    process(item);
    //还有条目，再设置一个定时器
    if (array.length > 0) {
        setTimeout(arguments.callee, interval);
    }
}, interval);

如：

</>复制代码 
var div = document.getElementById("div");
var arr = [321, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31, 32, 1432, 432, 432, 321, 5435, 6454, 6576, 56434, 2321, 321, 31];
for (var i = 0, len = arr.length; i < len; i++) {
    div.innerHTML += arr[i] + "
";
};
//16ms 用时
setTimeout(function shiftArr() {
    var item = arr.shift();
    div.innerHTML += item + "
";
    if (arr.length > 0) {
        setTimeout(shiftArr, 0);
    }
}, 0)
//58.2ms 用时

函数节流

对一些持续不断触发的事件，如果建立的事件处理程序不够好的话，会导致浏览器崩溃或者其他的事故。为了规避这个问题，可以使用定时器对事件处理程序进行节流。

函数节流背后的基本思想是：一些代码不可以在没有间断的情况下连续重复执行。具体做法是：第一次调用函数，创建一个定时器，在指定的时间间隔后运行代码。当第二次调用该函数时，它会清除前一次的定时器，并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的就是执行函数的请求停止了一段时间之后才执行。以下是该模式的基本形式：

</>复制代码 
var processor = {
    timeoutId: null,
    performProcessing: function() {
        //实际执行的处理程序
    },
    process: function() {
        clearTimeout(this.timeoutId);
        var that = this;
        this.timeoutId = setTimeout(function() {
            that.performProcessing();
        }, 1000);
    }
};
processor.process(); //尝试开始执行

只要代码是周期性执行的，都应该用节流。处理的速率根据需求设置，上面的例子是1000毫秒。

云服务器 GPU云服务器高级显示技巧 JAVASCRIPT技巧 javascript七大技巧 javascript调试技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78806.html

JavaScript 高级技巧

摘要：如果直接调用构造函数，那么会指向全局对象然后你的代码就会覆盖的原生。冻结对象最严格的防篡改就是冻结对象。中央定时器动画地址参考书籍高级程序设计忍者秘籍 1 安全类型检测 javascript内置类型检测并不可靠 safari某些版本（ var person = {name: wdd}; undefined > Object.preventExtensions(person); Obj...

wean 2019-08-20 15:05 评论0 收藏0
JS程序设计高级技巧

摘要：关于定时器要记住的最重要的事情是指定的时间间隔表示何时将定时器的代码添加到队列，而不是何时实际执行代码。多个定时器之间的执行间隔会比预期的小解决办法处理中数组分块，，函数节流，实际进行处理的方法实际执行的代码初始处理调用的方法一、高级函数安全类型检测 Object.protitype.toString.call(value) 作用域安全的构造函数 function Pers...

Codeing_ls 2019-08-23 15:06 评论0 收藏0
JS高级定时器

摘要：高级定时器高级技巧异步首先，中没有代码是立即执行的，而是一旦进程空闲则立即执行。针对第二种问题，使用定时器是解决方法之一。为定时器设定的时间间隔使得进程有时间在处理项目的事件之间转入空闲。该函数首先清除之前设置的任何定时器。 title: 高级定时器 date: 2016-12-13 tag: JS高级技巧 0x00 异步首先，JavaScript 中没有代码是立即执行的，...

leeon 2019-08-22 10:50 评论0 收藏0
关于javascript 中的高级定时器的若干问题

摘要：闭包闭包是指有权访问另一个函数作用域中的变量的函数当某个函数被调用时，会创建一个执行环境及相应的作用域链。要注意通过第句声明的这个方法属于构造函数生成的对象，而不属于构造函数的变量对象，也就是说，并不存在于作用域链中。看到评论里有仁兄建议我试试箭头函数，真是受宠若惊，本来写这篇文章也只是想记录写要点给自己日后看的。今天早上看到一篇总结javascript中this的文章JavaScr...

zr_hebo 2019-08-21 11:22 评论0 收藏0
初窥JavaScript事件机制的实现（二）—— Node.js中定时器的实现

摘要：下面通过几个的定时器示例以及相关源码来分析在中，功能到底是怎么实现的。我们知道，中的定时器并不同于计算机底层的定时中断。补充资料在高级程序设计第三版第章高级技巧中对高级定时器以及有较详细的讨论。至此，这类定时器函数已经可以为所用了。上一篇博文提到，在Node中timer并不是通过新开线程来实现的，而是直接在event loop中完成。下面通过几个JavaScript的定时器示例以及N...

novo 2019-08-21 10:33 评论0 收藏0