在js总使用setTimeout的注意事项

本文详细介绍了JavaScript中setTimeout的基本用法,包括如何使用、清除定时器以及注意事项,特别是针对函数调用时的this指向问题进行了深入探讨。

setTimeout 在 js 中的使用频率很高,最常见的就是计时器。

setTimeout 的使用方法很简单 var r = setTimeout(func , 1000);

首先它是用返回值,可以利用返回值来清除setTimeout ,clearTimeout(r)

setTimeout 的调用方式

setTimeout(func , 1000);

setTimeout("func()" , 1000);

setTimeout(function(){func ()} , 1000);


第一种方式特别需要注意的就是this的指向问题。

var A = function()

{

this.key = 1;

this.valuesss = 1;

this.func = function()

{

alert(this.valuesss);

}

}

var a = new A();

setTimeout(a.func,1000);

这个时候肯定会提示 找不到valuesss,原因就是this指向了window

window.setTimeout = function(func,timer) {}

在原生 JavaScript 中,`setTimeout()` 是一个用于延迟执行函数的基础功能。它允许指定一个函数和一个以毫秒为单位的时间间隔,该函数将在设定的时间后执行一次。这种机制非常适合实现一次性定时任务。 ### 基本使用方法 要使用 `setTimeout()`,需要提供一个回调函数以及希望延迟的毫秒数: ```javascript setTimeout(function() { console.log("这段代码将在3秒后执行"); }, 3000); ``` 上述代码会在 3 秒(即 3000 毫秒)之后打印出一条消息到控制台[^1]。 ### 清除定时器 如果想要取消尚未触发的 `setTimeout()` 调用,则可以调用 `clearTimeout()` 并传入由 `setTimeout()` 返回的标识符: ```javascript let timerId = setTimeout(function() { console.log("这段代码不会被执行"); }, 2000); // 在定时器触发之前清除它 clearTimeout(timerId); ``` 在这个例子中,尽管设置了 2 秒后的日志输出,但是紧接着就调用了 `clearTimeout()` 来取消这个定时器,因此日志不会被打印出来[^1]。 ### 使用箭头函数 从 ES6 开始,还可以利用箭头函数简化代码: ```javascript const timer = setTimeout(() => { document.body.style.backgroundColor = 'red'; }, 5000); ``` 这里我们改变了页面背景颜色,在 5 秒后将背景色变为红色[^1]。 ### 注意事项 - **避免内存泄漏**:确保不再需要时清除所有未完成的定时器。 - **上下文问题**:当使用对象的方法作为 `setTimeout` 的参数时,注意 `this` 关键字的行为可能会与预期不同。可以通过绑定上下文或者使用箭头函数来解决这个问题。 - **精确度问题**:由于浏览器对性能的优化以及其它脚本运行的影响,实际执行时间可能比指定的时间稍长。 通过这些方式,你可以有效地使用 `setTimeout()` 来控制代码执行时机,从而创建更加动态和响应式的网页应用体验。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值