定时器和线程问题

定时器和线程

定时器并不是JavaScript中的一项功能。

定时器作为对象和方法的一部分,才能在浏览器中使用。

如果在非浏览器环境下使用JavaScript,很可能定时器就不存在了。这时候就不得不使用特定实现的功能(如Rhino中的线程)

定时提供了一种让一段代码在一定毫秒后,再异步执行的能力。

由于JavaScript是单线程的特性,定时器可以提供一种跳出这种限制的方法。

设置和清除定时器

设置和清除定时器都是window对象的方法

方法

方法 格式 描述
setTimeout id = setTimeout(fn, delay) 启动一个定时器,单次执行
clearTimeout clearTimeout(id) 清除单次执行的定时器
setInterval id = setInterval(fn, delay) 启动一个定时器,多次执行
clearInterval clearInterval(id) 清除多次执行的定时器

注意:JavaScript的延迟时间是不能保证的。

原因和JavaScript线程的本质有很大的关系

执行线程中的定时器执行

异步事件的处理程序,如用户的界面事件和定时器,在线程中没有代码执行的时候才进行执行。这就是说,处理程序在执行时必须进行排队执行,并且一个处理程序并不能中断另外一个处理程序。

timeout和interval之间的区别

以下两种写法,都可以实现周期性的定时器

setTimeout(function repeatMe() {
    // ...
    setTimeout(repeatMe, 10);
}, 10);

setInterval(function () {
    // ...
}, 10)

区别

setTimeout()代码中,要在前一个callback回调执行结束后并延迟10毫秒(可能更多,但不会更少)以后,才能执行setTimeout()

setInterval()则是每隔10毫秒就尝试执行callback回调,而不是关注上一个callback是何时执行的。

回顾下

  • JavaScript引擎是单线程执行,异步事件必须要排队等待才能执行
  • 如果无法立即执行定时器,该定时器会被推迟到下一个可用的执行时间点上(可能更长,但不会比指定的延迟时间少)
  • 如果一直被延迟,到最后,Interval间隔定时器可能会无延迟执行,并且同一个interval处理程序的多个实例不能同时进行排队
  • setTimeout()和setInterval()在触发周期的定义上是完全不同的

使用定时器处理昂贵的计算过程

作为定时器,它在一段时间之后,可以有效暂停一段JavaScript代码的执行,定时器还可以将代码的各个部分,分解成不会让浏览器挂掉的碎片。

下面这段代码,就会造成页面的假死,让用户无法操作

var tbody = document.querySelector('tbody');
for (var i = 0; i < 20000; i++) {

    var tr = document.createElement('tr');

    for (var j = 0; j < 6; j++) {
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(i + ', ' + j));
        tr.appendChild(td)
    }

    tbody.appendChild(tr);
}

使用定时器解决问题

var rowCount = 20000; // 总行数
var divideInto = 10; // 执行的次数
var chunkSize = rowCount / divideInto; // 每组的次数
var iteration = 0; // 迭代

var tbody = document.querySelector('tbody');

setTimeout(function generateRows() {

    var base = chunkSize * iteration;

    for (var i = 0; i < chunkSize; i++) {

        var tr = document.createElement('tr');

        for (var j = 0; j < 6; j++) {
            var td = document.createElement('td');
            td.appendChild(document.createTextNode((i + base) + ', ' + j + ',' + iteration));
            tr.appendChild(td)
        }

        tbody.appendChild(tr);
        iteration++;

        if (iteration < divideInto) {
            setTimeout(generateRows, 0)
        }
    }
}, 0);

你可能感兴趣的:(定时器和线程问题)