js 定时器使用 setTimeOut setInterval

1,setTimeOut

ssetTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)
//setTimeOut:设置超时时间,只会执行一次! 
//等待3秒后执行语句  alert('等候完毕')
setTimeout("alert('等候完毕')", 3000 )

setTimeout(function () {
  alert("hello");
}, 1000);

任务队列:

(1),JS是一个单线程序的解释器,一段时间内只能执行一段代码,因此就有了一个JS任务队列。这些任务会被按照它们添加到队列的顺序执行。如下:

function btn () {
    setTimeout(function () {
        for (let i=0; i<5; i++) console.log(i);
    },980);
    setTimeout(function () {
        console.log("2");
    },1000)
}

输出结果:

0
1
2
3
4
2

(2),可以看出,如果队列是空的,则添加的代码会立即执行,否则,就要等前面的代码执行完后再执行。

看下面的例子:

function btn () {
    console.log(111);
    setTimeout(function () {console.log(222)}, 2000);
    setTimeout(function () {console.log(333)}, 0);
    console.log(444);
}

输出结果:

111
444
333
222

即使设置时间为0,但它仍然要排队,直到函数中其它非延迟语句被执行完毕后才开始执行队列中的代码。所以“333”在“444”后面。

(3),取消调用:

setTimeout()会返回一个数值ID,这个ID为计划执行代码的唯一标识符,可以用它来取消超时调用。

取消尚未执行的超时调用计划,用clearTimeout()方法。如下:

var timeId = null;
timeId = setTimeout(function () {alert("okok")}, 2000);
clearTimeout(timeId);

任务并未执行便被取消。

2,setInterval

setInterval(函数名,延迟时间); 
//setInterval:设置一个间隔时间,间隔多久会触发一次!除非 clearInterval,否则会永久执行下去! 

执行10次之后,间歇调用清空所有任务队列

var intervalId = null,
    num = 0,
    max = 10;

function intervalHandler() {
    num++;
    if (num === max) {
        clearInterval(intervalId);
        alert("done");
    }
}
intervalId = setInterval(intervalHandler, 500);

也可以使用setTimeout来写上面的函数

var num = 0,
    max = 10;
function timeoutHendler() {
    num++;
    if (num < max) {
        setTimeout(timeoutHendler, 500);
    } else {
        alert("done");
    }
}
setTimeout(timeoutHendler, 500);

3,Timer

Timer(延迟时间,执行次数); 
//Timer:设置一个间隔时间,有次数限制,只执行制定次数! 

Java定时任务Timer调度器【三】 注意事项(任务精确性与内存泄漏

相关链接:
1,JS 中的定时器 setTimeout()
2,超时调用(setTimeout)和间歇调用(setInterval)
3,setTimeOut、setInterval、Timer 的区别和用法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值