(83)Wangdao.com第十七天_JavaScript 定时器

时间 2019-11-08

标签 wangdao.com wangdao com 第十七天 7天 javascript 定时器栏目 JavaScript 繁體版

原文原文链接

JavaScript 提供定时执行代码的功能，叫作定时器（timer）。ajax

主要由 setTimeout() 和 setInterval() 这两个函数来完成。它们向任务队列添加定时任务浏览器

setTimeout()

- - ```
  var timerId = setTimeout( func()|code, delay);
```
- 第一个参数 func() | code 是将要推迟执行的函数名或者一段代码服务器
- 第二个参数 delay是推迟执行的毫秒数app

来指定某个函数或某段代码，在多少毫秒以后执行。
它返回一个整数，表示定时器的编号，之后能够用来取消这个定时器。

例1

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
// 1
// 3
// 2

上面代码会先输出 1 和 3，而后等待 1000毫秒再输出 2函数

若是第一个参数
- 是代码，则必须以字符串的形式传入
- 是函数，则直接传入函数名
  - ```
  function f() {
      console.log(2);
  }
  
  setTimeout(f, 1000);
```
若是第二个参数省略，则默认为 0
除了前两个参数，setTimeout(func , delayTime , argu1, argu2......) 还容许更多的参数。做为回调函数的实参
- ```
setTimeout(function (a,b) {
    console.log(a + b);
}, 1000, 1, 1);    // 1秒钟后打印 '2'
```

若是传入的是 某个对象的方法，在 setTimeOut() 中运行时，this 仍是会指向 window

var x = 1;

var obj = {
    x: 2,
    y: function () {
        console.log(this.x);
    }
};

setTimeout(obj.y, 1000);    // 1    打印的是全局变量 x

上面代码的解决办法是，使用匿名函数包裹

var x = 1;

var obj = {
    x: 2,
    y: function () {
        console.log(this.x);
    }
};

setTimeout(function () {
    obj.y();
}, 1000);    // 2    打印的是 obj 对象的属性 x

另外一种解决方法是使用 bind() 函数将 obj.y() 方法绑定在 obj 上面

var x = 1;

var obj = {
    x: 2,
    y: function () {
        console.log(this.x);
    }
};

setTimeout(obj.y.bind(obj), 1000)

setInterval()
- 用法与 setTimeout() 彻底一致，
- 区别在于
  - setInterval() 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行，直到关闭当前窗口
  - setInterval() 设置的时间间隔，要把程序运行时间算在内。
    - 好比，setInterval指定每 100ms 执行一次，每次执行须要 5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。
    - 若是某次执行耗时特别长，好比须要105毫秒，那么它结束后，下一次执行就会当即开始。
  - ```
  var aDiv = document.getElementById('a_div');
  var opacity = 1;
  var flag = true;
  
  var brath = setInterval(function() {
      if (opacity >= 0 && flag ) {
          opacity -= 0.1;
      } else {
          opacity += 0.1;
      }
      aDiv.style.opacity = opacity;
      if(opacity < 0 || opacity > 1){
          flag = !flag;
      }
  }, 200);
```
  上面代码是让一个div 透明度慢慢下降，而后又慢慢增高。。。呼吸的效果性能

实现轮询

轮询 URL 的 Hash 值是否发生变化的例子

var hash = window.location.hash;
var hashWatcher = setInterval(function() {
    if (window.location.hash != hash) {
        updatePage();
    }
}, 1000);

为了确保两次执行之间有固定的间隔

能够不用 setInterval()，而是每次执行结束后，使用 setTimeout() 指定下一次执行的具体时间

var i = 1;
var timer = setTimeout(function f() {
    // ...
    timer = setTimeout(f, 2000);   // 能够确保，下一次执行老是在本次执行结束以后的2000毫秒开始
}, 2000);

clearTimeout() 和 clearInterval()

都是返回一个整数值，表示计数器编号

将该整数传入 clearTimeout() 和 clearInterval() 函数，就能够取消对应的定时器

var id1 = setTimeout(f, 1000);
var id2 = setInterval(f, 1000);

clearTimeout(id1);
clearInterval(id2);

// 上面代码中，回调函数f不会再执行了，由于两个定时器都被取消了

setTimeout() 和 setInterval() 返回的整数值是连续的，

也就是说，第二个 setTimeout() 方法返回的整数值，将比第一个的整数值大 1

function f() {}
setTimeout(f, 1000);    // 10
setTimeout(f, 1000);    // 11
setTimeout(f, 1000);    // 12

利用这一点，能够写一个函数，取消当前全部的 setTimeout() 定时器

(function() {
    var gid = setInterval(clearAllTimeouts, 0);

    function clearAllTimeouts() {
        var id = setTimeout(function() {}, 0);
        while (id > 0) {
            if (id !== gid) {
                clearTimeout(id);
            }
            id--;
        }
    }
})();

先调用setTimeout，获得一个计算器编号，而后把编号比它小的计数器所有取消this

debounce()
- 用于消抖的函数

- 有时，咱们不但愿回调函数被频繁调用
  - 好比，用户填入网页输入框的内容，但愿经过 Ajax 方法传回服务器，jQuery 的写法以下
```
$('textarea').on('keydown', ajaxAction);
```
    这样写有一个很大的缺点，就是若是用户连续击键，就会连续触发keydown事件，形成大量的 Ajax 通讯。spa
  - 这是没必要要的，并且极可能产生性能问题。
  - 正确的作法应该是，
    - 设置一个门槛值，表示两次 Ajax 通讯的最小间隔时间。
    - 若是在间隔时间内，发生新的 keydown 事件，则不触发 Ajax 通讯，而且从新开始计时。
    - 若是过了指定时间，没有发生新的 keydown 事件，再将数据发送出去
    - 这种作法叫作 debounce（防抖动）
      // 假定两次 Ajax 通讯的间隔不得小于2500毫秒，上面的代码能够改写成下面这样 $('textarea').on('keydown', debounce(ajaxAction, 2500)); function debounce(fn, delay){ var timer = null; // 声明计时器 return function() { var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; }
      只要在2500毫秒以内，用户再次击键，就会取消上一次的定时器，而后再新建一个定时器。这样就保证了回调函数之间的调用间隔，至少是2500毫秒code

setTimeout() 和 setInterval() 的运行机制
- 是将指定的代码移出本轮事件循环，等到下一轮事件循环，再检查是否到了指定时间。
- 若是到了，就执行对应的代码；
- 若是不到，就继续等待

这意味着，setTimeout() 和 setInterval() 指定的回调函数，必须等到本轮事件循环的全部同步任务都执行完，才会开始执行。
- 因为前面的任务到底须要多少时间执行完，是不肯定的，因此没有办法保证，setTimeout() 和 setInterval() 指定的任务，必定会按照预约时间执行。
```
setTimeout(someTask, 100);
veryLongTask();

// 上面代码的setTimeout，指定100毫秒之后运行一个任务。
// 可是，若是后面的veryLongTask函数（同步任务）运行时间很是长，过了100毫秒还没法结束，那么被推迟运行的someTask就只有等着，等到veryLongTask运行结束，才轮到它执行
```

再看一个setInterval的例子

setInterval(function () {
    console.log(2);
}, 1000);

sleep(3000);

function sleep(ms) {
    var start = Date.now();
    while ((Date.now() - start) < ms) {
    }
}
// 上面代码中，setInterval要求每隔1000毫秒，就输出一个2。
// 可是，紧接着的sleep语句须要3000毫秒才能完成，那么setInterval就必须推迟到3000毫秒以后才开始生效。
// 注意，生效后setInterval不会产生累积效应，即不会一会儿输出三个2，而是只会输出一个2。

setTimeout(f, 0)
- 若是指定时间为0，即setTimeout(f, 0)，那么会马上执行吗？
  - 答案是不会。由于上一节说过，必需要等到当前脚本的同步任务，所有处理完之后，才会执行setTimeout指定的回调函数f。
  - 也就是说，setTimeout(f, 0) 会在下一轮事件循环一开始就执行
```
setTimeout(function () {
    console.log(1);
}, 0);
console.log(2);
// 2
// 1
```
    上面代码先输出2，再输出1。由于2是同步任务，在本轮事件循环执行，而1是下一轮事件循环执行对象

- setTimeout(f, 0)这种写法的目的
  - 是，尽量早地执行 f()，
  - 可是并不能保证马上就执行f()
  - 不一样的浏览器有不一样的实现
    - 以 Edge 浏览器为例，会等到4毫秒以后运行。
    - 若是电脑正在使用电池供电，会等到16毫秒以后运行；
    - 若是网页不在当前 Tab 页，会推迟到1000毫秒（1秒）以后运行。
    - 这样是为了节省系统资源

- - 应用：
    - 能够调整事件的发生顺序
      - 好比，网页开发中，某个事件先发生在子元素，而后冒泡到父元素，即子元素的事件回调函数，会早于父元素的事件回调函数触发。
      - 若是，想让父元素的事件回调函数先发生，就要用到 setTimeout(f, 0)
        
        // HTML 代码以下 // <input type="button" id="myButton" value="click"> var input = document.getElementById('myButton'); input.onclick = function A() { setTimeout(function B() { input.value +=' input'; }, 0) }; document.body.onclick = function C() { input.value += ' body' };
      - 上面代码在点击按钮后，先触发回调函数 A ，而后触发函数 C 。
      - 函数 A 中，setTimeout() 将函数 B() 推迟到下一轮事件循环执行，这样就起到了，先触发父元素的回调函数 C() 的目的了

用户自定义的回调函数，一般在浏览器的默认动做以前触发

好比，用户在输入框输入文本，keypress 事件会在浏览器接收文本以前触发。所以，下面的回调函数是达不到目的的

// HTML 代码以下
// <input type="text" id="input-box">

document.getElementById('input-box').onkeypress = function (event) {
    this.value = this.value.toUpperCase();
}
// 上面代码想在用户每次输入文本后，当即将字符转为大写。
// 可是实际上，它只能将本次输入前的字符转为大写，
// 由于浏览器此时还没接收到新的文本，因此 this.value 取不到最新输入的那个字符

解决：

document.getElementById('input-box').onkeypress = function() {
    var self = this;
    setTimeout(function() {
         self.value = self.value.toUpperCase();
    }, 0);
}

上面代码将代码放入setTimeout之中，就能使得它在浏览器接收到文本以后触发

因为setTimeout(f, 0)实际上意味着，将任务放到浏览器最先可得的空闲时段执行，

因此那些计算量大、耗时长的任务，经常会被放到几个小部分，分别放到setTimeout(f, 0)里面执行

var div = document.getElementsByTagName('div')[0];

// 改变一个网页元素的背景色 写法一    会形成浏览器“堵塞”    由于 JavaScript 执行速度远高于 DOM，会形成大量 DOM 操做“堆积”
for (var i = 0xA00000; i < 0xFFFFFF; i++) {
    div.style.backgroundColor = '#' + i.toString(16);
}

// 改变一个网页元素的背景色 写法二    的好处，解决了上面的问题
var timer;
var i=0x100000;

function func() {
    timer = setTimeout(func, 0);
    div.style.backgroundColor = '#' + i.toString(16);
    if (i++ == 0xFFFFFF){
        clearTimeout(timer);
    }
}

timer = setTimeout(func, 0);setTimeout(f, 0)

- - - - 代码高亮的处理
        
        若是代码块很大，一次性处理，可能会对性能形成很大的压力，
        
        那么将其分红一个个小块，一次处理一块，
        
        好比写成 setTimeout(highlightNext, 50) 的样子，性能压力就会减轻