setTimeout 和 clearTimeout

最新推荐文章于 2024-07-17 09:31:18 发布

Tarafireworks

最新推荐文章于 2024-07-17 09:31:18 发布

阅读量1w

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44760073/article/details/119889308

版权

前端专栏收录该内容

82 篇文章 1 订阅

订阅专栏

本文通过三个示例探讨了JavaScript中setTimeout和clearTimeout的常见错误与正确用法。错误示例1展示了无论代码是否执行，10分钟后都会弹出警告。错误示例2说明了在setTimeout执行前调用clearTimeout会导致定时器永不触发。正确示例则展示了如何在10分钟内通过外部函数stopDeal清除定时器，确保在需要时避免警告的弹出。

摘要由CSDN通过智能技术生成

1.先写一个错误的例子：

function DealSomething() {
//write some code
window.setTimeout(function () {
alert(“已经等待超过10分钟，自动关闭页面。”);
}, 600000);
}

这个例子的行为：不管是否处理完，超过10分钟后，都弹出这个alert框来。

2.再看另一个错误的例子，这次使用了clearTimeout函数来清除setTimeout。

function DealSomething() {
//write some code
var Timer =window.setTimeout(function () {
alert(“已经等待超过10分钟，自动关闭页面。”);
}, 600000);
clearTimeout(Timer);
}

其中Timer是setTimeout函数的ID标识，每次调用setTimeout函数都会产生一个唯一的ID，与操作系统中的进程ID相似, 可以通过clearTimeout函数(此函数的参数接收一个setTimeout返回的ID) 暂停setTimeout函数还未执行的代码。

但这个例子的行为是：setTimeout函数永远不会被执行，因为如果还没有执行setTimeout函数中的代码，就调用了clearTimeout函数，那么就不会执行setTimeout函数中的代码了。

3.最后是一个正确的例子。

var Timer
function DealSomething() {
//write some code
Timer =window.setTimeout(function () {
alert(“已经等待超过10分钟，自动关闭页面。”);
}, 600000);
}
function StopDeal() {
clearTimeout(Timer);
}

这样，先调用DealSomething(), 因为它使用了函数外部的变量Timer, 现在这个函数是一个闭包了，在10分钟内调用StopDeal()时，就能达到清除setTimeout函数的作用，等过了10分钟时才不会出alert提示了；如果10分钟内不调用StopDeal()函数，那么就会按期执行setTimeout函数了。