SetTimeout和setInterval的用法

setTimeout与setInterval详解
本文详细解释了JavaScript中的setTimeout和setInterval函数的用法及区别。setTimeout用于在指定时间后执行一次代码,而setInterval则是在指定的时间间隔重复执行代码。文章通过示例对比了这两种定时器的不同行为。

SetTimeout setInterval 的用法

一、 定义

setTimeout

语法:setTimeout( 程序或代码,时间);

    隔多少时间后就执行代码一次,时间单位为毫秒;

Var timer=setTimeout( "i++;pid.value=i;" ,1000);

 

setInterval

语法:setInterval ( 程序或代码,时间);

    每隔多少时间后就执行代码一次,时间单位为毫秒;

Var timer= setInterval ( "i++;pid.value=i;" ,1000);

 

clearTimeout

语法:clearTimeout ( 定时间器的id);

    停止定时器工作;

Var timer= setInterval ( "i++;pid.value=i;" ,1000);

上面的两个定时器都可以使用clearTimeout 清除掉。

 

二、 setTimeout setInterval 的区别

setTimeout 用于循环:

function ff()

{

    Alert( ajax );

    setTimeout( ff() ,1000);

}

上面的意思是每隔一定时间弹出一个窗口,这个时间由ff() 函数执行的时间再加上1000 两个的和。也就是每当执行完ff() 函数1 秒后再次执行这个函数,它只是保证每次执行的间隔为1 秒。

 

setInterval 用于循环:

function ff()

{

    Alert( ajax );

}

setInterval( ff() ,1000);

上面的意思是从函数第一次运行开始,每隔1 秒钟再次运行他。如果在一秒中内,函数没有运行完,两个函数将同时运行。注意。

 

 

### JavaScript 中 setTimeout setInterval用法及区别 #### 1. 基本概念 JavaScript 提供了 `setTimeout` `setInterval` 两个函数来处理延时定时任务。这两个函数都属于 `window` 对象,允许开发者指定在一定时间后执行的代码[^4]。 #### 2. `setTimeout` 的用法 `setTimeout` 函数用于在指定的时间延迟后执行一次回调函数。其基本语法如下: ```javascript setTimeout(callback, delay); ``` - `callback`:需要执行的函数。 - `delay`:延迟的时间(以毫秒为单位)。 示例代码: ```javascript setTimeout(() => { console.log("Hello after 2 seconds"); }, 2000); // 2000 毫秒等于 2 秒 ``` 需要注意的是,`setTimeout` 的回调函数只会执行一次。如果需要重复执行某个操作,则需要使用其他方法,例如递归调用 `setTimeout`[^5]。 #### 3. `setInterval` 的用法 `setInterval` 函数用于每隔指定的时间间隔重复执行一个回调函数。其基本语法如下: ```javascript setInterval(callback, interval); ``` - `callback`:需要执行的函数。 - `interval`:每次执行之间的时间间隔(以毫秒为单位)。 示例代码: ```javascript setInterval(() => { console.log("Hello every 2 seconds"); }, 2000); // 每隔 2 秒打印一次 ``` 与 `setTimeout` 不同,`setInterval` 的回调函数会不断重复执行,直到手动停止它[^5]。 #### 4. 取消定时器 为了取消定时器,JavaScript 提供了 `clearTimeout` `clearInterval` 方法。 - `clearTimeout(id)`:取消由 `setTimeout` 创建的定时器。 - `clearInterval(id)`:取消由 `setInterval` 创建的定时器。 示例代码: ```javascript const timeoutId = setTimeout(() => { console.log("This will not run because it is cleared"); }, 2000); clearTimeout(timeoutId); // 取消定时器 const intervalId = setInterval(() => { console.log("Running every second..."); }, 1000); setTimeout(() => { clearInterval(intervalId); // 停止定时器 console.log("Interval stopped after 5 seconds"); }, 5000); ``` #### 5. 区别总结 | 特性 | `setTimeout` | `setInterval` | |---------------------|--------------------------------------|-------------------------------------| | 执行次数 | 只执行一次 | 按照设定的时间间隔重复执行 | | 控制方式 | 使用 `clearTimeout` 取消 | 使用 `clearInterval` 取消 | | 回调执行时机 | 宏任务队列的一部分 | 宏任务队列的一部分 | | 高级应用 | 可通过递归实现类似 `setInterval` 的功能[^3] | 更适合简单的重复任务 | #### 6. 高级技巧 - **使用 `setTimeout` 模拟 `setInterval`**:通过递归调用 `setTimeout`,可以更灵活地控制定时器的行为。 - **防抖与节流**:在事件处理中,可以通过 `setTimeout` 实现防抖(debounce)节流(throttle)功能,优化性能。 ```javascript // 防抖示例 function debounce(func, wait) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; } // 节流示例 function throttle(func, limit) { let inThrottle; return function() { if (!inThrottle) { func.apply(this, arguments); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; } ``` #### 7. 注意事项 - `setTimeout` `setInterval` 的回调函数属于宏任务(macrotask),而 Promise 的回调属于微任务(microtask)。因此,它们的执行顺序可能会受到任务队列的影响。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值