资讯专栏INFORMATION COLUMN

JS setTimeout 与 setInterval

wupengyu / 2551人阅读

摘要:它们将被传入推迟执行的函数以下不支持更多的参数,可以用或实现被推迟执行的回调函数是在全局环境执行,这有可能不同于函数定义时的上下文环境。

事件流逝触发的事件

这类事件不是基于用户针对可见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指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行。

    
                    
阅读需要支付1元查看
<