定时器js

关注

转载最新推荐文章于 2026-04-16 12:04:49 发布 441 阅读 AI 写同款· GEO 优化 ›

【JavaScript BOM】定时器、location对象、navigator对象、JS执行机制 BOM1.BOM概述2.window对象常见事件窗口加载事件1窗口加载事件2两者区别调整窗口大小事件3.定时器setTimeout()案例：五秒后自动关闭广告停止setTimeout()定时器setInterval()案例：倒计时停止setInterval()定时器案例：发送短信this指向4.JS执行机制JS单线程同步和异步5.location对象5.1 URL5.2 location对象的属性案例：5秒后跳转页面案例：获取URL参数5.3 location对象的方法6.navigator对象 1.BOM 阅读详情

定时器

一、两种定时器

setTimeout() 延迟定时器

setInterval() 循环定时器（‘间隔器’）

定时器中的函数挂载在window对象上，内部的this指向window

 setTimeout(function(){
            console.log(111);
        },1000)  //一秒钟打印出111

  setInterval(function(){
            console.log(111);
        },1000)  //每隔一秒钟打印出111

二、清除定时器

每次使用定时器时，必须清除定时器

如何清除定时器呢，每一个定时器开启后，都会返回一个对应的id，通过这个id就可以清除定时器

clearTimeout(timer) ====> 用于清除setTimeout

clearInterval(timer) ====> 用于清除setInterval

//在开启定时器的同时定义一个变量接受定时器返回的id，用于清除定时器
        var timer=setTimeout(function(){
            console.log(111);
        },1000)
        clearTimeout(timer);

        var timer2=setInterval(function(){
            console.log(111);
            clearInterval(timer2);
        },1000)

三、关于定时器函数的参数

定时器可以接受多个参数

1、第一个参数是执行的函数，必须传递，不传没什么意义，会报错

2、第二个参数为定时器执行的毫秒数，可以不传

3、第三个之后的所有参数，都将是第一个参数函数执行的实参

//没有第二个参数会立即执行
        setTimeout(function(){
            console.log(111);
        })

        setTimeout(function(a,b){
            console.log(a,b);
        },1000,10,20)

HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔）,不得低于4毫秒，如果低于这个值，就会自动增加，在此之前，老版本的浏览器都将最短间隔设为10毫秒，不同的浏览器实现不同

四、关于定时器的第一个参数

4.1、匿名函数

 setTimeout(function(){
            console.log(111);
        },1000)

4.2、有名函数

  setTimeout(function haha(){
            console.log(111);
        },1000)

4.3、有名函数的函数名

 function haha(){
            console.log(111);
        }
        setTimeout(haha,1000)

4.4、能被当成js语句执行的字符串

setTimeout('console.log(111)',1000)

五、JS的单线程

5.1、单线程的理解

同时只能执行一个任务，如果后面有任务，需要等到当前任务执行完毕，才能执行后面的任务

for(var i=0;i<10;i++){
            console.log(1);
        }
        console.log(2);

js的单线程就是说上面的代码，无论for循环多么耗时，都必须先执行完，再打印2，这就会造成线程阻塞的问题

5.2、线程阻塞

前面的任务死循环或者耗时过长导致后面代码不能被执行，这种情况叫做线程阻塞。

这样会出现问题，所以对于像事件，定时器，ajax请求这种非常耗时的程序，浏览器会开辟其他的线程来处理，所以这些程序我们叫做异步程序

浏览器有三个常驻线程，JS引擎线程，界面的渲染线程，已经浏览器事件触发线程，还有一些执行完就终止的线程，比如HTTP请求线程

for(var i = 0; i< 5; i++){
    setTimeout(function(){
        console.log(i)
    },1000)
}   //5

5.3、同步任务和异步任务

js的单线程意味着所有的任务需要排队，前一个任务结束，才会执行后一个任务，如果前一个任务耗时很长，后一个任务就不得不一直等着

所以JS的任务队列分为两种，同步任务和异步任务

1、同步任务：在JS主线程排队执行的任务 ===>形成执行栈

2、异步任务：不进入主线程进入‘任务队列’的任务 ===> 形成任务队列

异步任务只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行

  setTimeout(function(){
            console.log(1)
        },0)
        for(var i = 0; i< 10;i++){
            console.log(2)
        } //定时器会等待for循环执行完毕后再执行