定时器setTime和setInterval

2次阅读

共计 890 个字符,预计需要花费 3 分钟才能阅读完成。

setTimeout()

用法

参数:

setTimeout(fn,100,1,2)。第一个和第二是参数固定的,第一个是回调函数,第二个是延迟时间,后面的都是回调函数的参数。

返回值:

setTimeout 返回值是一个 id, 表示 setTimeout 的 id,便于使用 clearTimeout 清除。

使用 setTimeout 能将里面的函数加入到任务队列中去。

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
 上面代码执行到 setTimeout 时,定时线程会将里面的代码放在定时任务队列里面。然后 1s 后输出 2。假如 setTimeout('console.log(2)',1000); 后面有代码报错,setTimeout 也就不会执行了。

注意点

setTimeout 回调函数里面的 this 关键字指向全局环境。


let x=1;
let obj={
    x:2,
    y:function(){console.log(this.x)
    }
}
setTimeout(obj.y(),1000)// 此时输入的是 1。解决办法就是在套一层函数隔开。let x=1;
let obj={
    x:2,
    y:function(){console.log(this.x)
    }
}
setTimeout(function(){obj.y()},1000)// 此时输入的是 2。

setInterval()

用法,参数,this 指向都和 setTimeout 相同, 不同的只是 setInterval 会定时循环执行。除非关闭当前窗口。

setInterval 是指一次函数执行,到下次函数执行时的时间间隔;不包括函数本身的执行时间。所以假如函数本身执行时间为 105ms 大于指定时间间隔 100ms,那么下次函数是在 105ms 后执行。这样会造成时间间隔不固定(例如 ajax 造成的)。解决方案使用 setTimeout 代替。自己调用自己

var i = 1;
var timer = setTimeout(function f() {
  // ...
  timer = setTimeout(f, 2000);
}, 2000);

防抖动函数 debounce

正文完
 0