JS setTimeout 与 setInterval

事件流逝触发的事件

这类事件不是基于用户针对可见Web页面元素执行的行为，而是基于时间的流逝。
和JavaScript中所有其他事件一样，这些时间流逝事件也是由函数处理的。

---

setTimeout()

捡重点说了

• setTimeout允许添加更多的参数。它们将被传入推迟执行的函数

          setTimeout(function(a,b){
              alert(a+b);
          },1000,2,5)            // 7

  IE9以下不支持更多的参数，可以用apply或bind实现

---

• 被setTimeout推迟执行的回调函数是在全局环境执行，这有可能不同于函数定义时的上下文环境。

        var x = 1;
        var o = {
            x: 2,
            y:function(){console.log(this.x);}
        };
        
        setTimeout(o.y,1000);        // 1
        
        // 另一个例子
        
        function User(login) {
          this.login = login;
          this.sayHi = function() {
            console.log(this.login);
          }
        }
        
        var user = new User('John');       
        setTimeout(user.sayHi, 1000);

this.login会报错，因为取不到值。

一种解决方法是将user.sayHi放在函数作用域内执行，而不是在全局作用域中。

       setTimeout(function(){
            user.sayHi();
        }, 1000);    // "John"

另一种方法，就是采用闭包，将this与当前作用域绑定。

        document.getElementById('click-ok').onclick = function() {
          var self = this;
          setTimeout(function() { 
            self.value='OK';
          }, 100);
        }
        // setTimeout指定的函数中的this，总是指向定义时所在的DOM节点。
        

---

setInterval()

setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

    <button onclick="clearInterval(time)">Stop!</button>
    <script type="text/javascript">
        var counter = 0;
        var time = setInterval(function() {
            console.log(counter);
            counter++;
        },2000)

简易计数器，直到用户点击按钮

        function f() {
            for (var i=0;i<arguments.length;i++) {
                console.log(arguments[i]+" | "+arguments.length);
            }
        };
        setInterval(f,1000,1,2,3);
        // "1 | 3"
        // "2 | 3"
        // "3 | 3"

与setTimeout一样，除了前两个参数，setInterval 方法还可以接受更多的参数，它们会传入回调函数

待.......

• 定时器

• 关于setInterval()和setTimeout()返回值

• 关于setInterval()你所不知道的地方