JavaScript定时器

本文深入解析JavaScript中的setTimeout与setInterval函数,解释它们的工作原理及如何避免代码执行时间过长导致的阻塞问题。通过引入函数节流概念,展示如何优化代码执行效率,确保用户交互体验不受影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转载地址:http://www.cnblogs.com/yangjunhua/archive/2012/04/12/2444106.html


一、setTimeout

setTimeout(function(){
    //要执行的代码                    
},200);

理解:指隔200ms后,定时器代码被添加到队列中,等待JavaScript进程空闲后,代码才执行

二、setInterval

setInterval(function(){
    //要执行的代码                    
},200);

A、理解:
1、上面代码是指每隔200ms就创建一个执行代码的定时器

2、当使用setInterval时,仅当(在队列中)没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中,引用JavaScript高级程序设计第二版书中语句
(即:当前一个定时器代码执行时,紧跟后面的第一个定时器代码将添加到队列中,等待执行,再后面的定时器代码不会添加到队列中)

B、问题:
当定时器代码执行时间(假如需要600ms才执行完)超过指定间隔(这里是200ms),那么某些定时器代码就会被跳过(即后面的定时器代码不会被添加到队列中),
前一个定时器代码执行完毕后,队列中的定时器代码立刻执行,各定时器之间的代码执行没有间隔

C、解决方法:
使用链式setTimeout,如:

setTimeout(function(){
    //要执行的代码
    setTimeout(arguments.callee,200);
},200);

这样做的好处是:前一个定时器要执行的代码执行完且等待200ms后,才创建一个新的定时器,并把定时器代码添加到队列中执行
即:不会出现定时器代码被跳过的情况;定时器之间的代码执行可以有间隔(根据自己设置)

D、实际应用:
1、javascript脚本会阻塞浏览器处理其他事件,如与用户的交互,如果一段js脚本运行的时间过长,那么我们可以使用js定时器,腾出空闲,避免用户等过长时间
2、理解函数节流

函数节流:指某些代码不可以在没有间断的情况下连续执行
看下面代码:

window.onresize = function(){
    console.log(document.documentElement.clientHeight);
}
//在resize事件处理程序结束之前,一直输出着浏览器视口高度

当你在调整浏览器窗口大小时,resize事件处理程序中代码就一直在运行着

改进代码:
var timeoutId = null;
window.onresize = function(){
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function(){
        console.log(document.documentElement.clientHeight);                                
    },100);
}
封装以后的改进代码:

function cHeight(){
    console.log(document.documentElement.clientHeight);
}
function throttle(method,context){
    clearTimeout(method.tId);
    method.tId = setTimeout(function(){
        method.call(context);                               
    },100);
}
window.onresize = function(){
    throttle(cHeight); 
}
 
//在resize事件处理程序结束后,等待100ms后代码添加到队列中执行,
只输出最后一个定时器代码结果,浏览器不会在极短的时间内进行过多的计算

在resize事件没有结束之前clearTimeout(timeoutId);和定时器一样一直在执行的,目的是清除在100ms内创建的定时器。给页面上的其他交互留出时间。

### JavaScript 定时器 `setTimeout` 和 `setInterval` 的使用方法 JavaScript 提供了两种主要的定时器函数:`setTimeout` 和 `setInterval`,它们用于延迟执行或周期性地执行一段代码。 #### 1. `setTimeout` `setTimeout` 函数用于在指定的时间后执行一次回调函数。其基本语法如下: ```javascript setTimeout(function, delay, param1, param2, ...); ``` - **function**: 要执行的回调函数。 - **delay**: 延迟的时间(以毫秒为单位)。 - **param1, param2, ...**: 可选参数,传递给回调函数。 例如: ```javascript function Fun3(str1) { alert(str1); } var timer = setTimeout(Fun3, 2000, "参数1"); // 2秒后弹出“参数1” clearTimeout(timer); // 清除定时器,防止执行 ``` 上述代码展示了如何设置一个定时器并在两秒后执行回调函数[^1]。如果需要提前停止定时器,可以使用 `clearTimeout` 方法[^3]。 #### 2. `setInterval` `setInterval` 函数用于每隔指定的时间间隔重复执行回调函数。其基本语法如下: ```javascript setInterval(function, delay, param1, param2, ...); ``` - **function**: 要执行的回调函数。 - **delay**: 每次执行之间的间隔时间(以毫秒为单位)。 - **param1, param2, ...**: 可选参数,传递给回调函数。 例如: ```javascript var counter = 0; var intervalId = setInterval(function () { console.log("计数:", counter++); if (counter > 5) { clearInterval(intervalId); // 当计数超过5时停止定时器 } }, 1000); // 每隔1秒执行一次 ``` 上述代码展示了如何设置一个每秒执行一次的定时器,并在满足条件时通过 `clearInterval` 方法停止定时器[^2]。 #### 区别与注意事项 - **执行次数**:`setTimeout` 只执行一次,而 `setInterval` 会不断重复执行直到被清除。 - **清除方法**:`setTimeout` 使用 `clearTimeout`,`setInterval` 使用 `clearInterval`。 - **返回值**:两者都会返回一个唯一的标识符,用于清除对应的定时器。 ### 示例代码 以下是一个结合 `setTimeout` 和 `setInterval` 的完整示例: ```javascript // 使用setTimeout setTimeout(() => { console.log("这是setTimeout输出"); }, 3000); // 使用setInterval let count = 0; const intervalId = setInterval(() => { console.log("当前计数:", count++); if (count > 5) { clearInterval(intervalId); // 停止计时器 } }, 1000); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值