setTimeout()和clearTimeout用法详解

setTimeout()是window的方法,该方法用于在指定毫秒数后调用函数或者计算表达式。

我们一般常用的参数是两个,今天发现还有第三个参数
语法如下:

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

对于code这种方式,你可以使用字符串而不是安全function 的,在delay使用之后编译和执行字符串(使用该语法是不推荐的, 原因和 eval()一样,有风险)。

参数描述
function必需 参数可以是回调函数
delay可选。执行这个function 需要等待的时间,以毫秒计。默认为 0。
arg可选。 传给回调函数的参数(IE9 及其更早版本不支持该参数)。

下面是一道经典的面试题

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}

执行代码,发现会每过一秒,会输出一个6,一共输出五次
那么怎么让他每隔1秒,依次输出12345呢,除了用let来定义i,还有一种方法就是利用setTimeout得 第三个参数,这个参数会被当成 timer 函数的参数传入。
代码如下:

for (var i = 1; i <= 5; i++) {
  setTimeout(
    function timer(j) {
      console.log(j)
    },
    i * 1000,
    i
  )
}

第三个参数以及之后的参数都可以作为回调函数的参数,举个最简单的例子
一个参数:

setTimeout((name) => {
    console.log('我是' +  name)
}, 1000, '小太阳')
// 1秒后输出我是小太阳

多个参数:

setTimeout((name, age) => {
    console.log('我是' + name + '永远' + age + '岁')
}, 1000, '小太阳', '18')
// 1秒后输出我是小太阳永远18岁

如果第三个参数是个函数,则会先执行这个函数

setTimeout(
    function(){
        console.log('回调函数')
    },
    1000,
  setTimeout(
    function(){
        console.log('先执行')
    }, 0)
)
// 立即输出先执行,1秒后输出回调函数

返回值 timeoutID
setTimeout的返回值timeoutID是一个正值,表示可以给予这个clearTimeout()最终结果。+

下面就说一下clearTimeout()

clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。
clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。

语法:

clearTimeout(timeoutID)
参数描述
timeoutID调用 setTimeout() 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setTimeout() 所设定的定时执行操作。
  • 7
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值