JavaScript 定时刷新与关闭窗口，以及 setTimeout 和 setInterval 的正确用法

使用 setTimeout 实现定时刷新与关闭窗口

setTimeout 是 JavaScript 中最基础的异步控制工具，常用于延迟执行某段代码。在实际应用中，它可以轻松实现对浏览器的控制，如定期重载当前页或自动关闭弹窗窗口。

第1步：定时刷新当前窗口

若希望页面每隔 5 秒自动重新加载一次，可以调用 self.location.reload()。注意此处将命令作为字符串传递给 setTimeout，这能直接在全局作用域执行指令。

// 每隔五秒定时刷新当前窗口
setTimeout("self.location.reload();", 5000);

第2步：定时关闭窗口

对于由脚本打开的窗口（非用户手动点击地址栏进入），可以使用 window.close() 进行关闭。在某些旧版浏览器或安全策略严格的环境中，可能需要先解除 window.opener 的引用关系以确保顺利关闭。

// js 定时关闭窗口 (已在 IE 和 Firefox 中测试)
// 6秒后自动关闭当前窗口
setTimeout("window.opener=null;window.close()", 6000);

掌握定时器的核心方法：setTimeout vs setInterval

Window 对象提供了两种主要方式来实现延时执行：setTimeout 用于单次延时执行，setInterval 用于周期性重复执行。理解它们的原型和使用差异是编写健壮前端代码的前提。

方法原型与基本区别

• setTimeout(expression, milliseconds)：在指定毫秒数后，将代码添加到事件队列中等待执行。通常只执行一次。
• setInterval(expression, milliseconds)：每隔指定的毫秒数，就将代码添加到事件队列中。只要定时器未停止，就会反复触发。

函数调用与字符串传递的陷阱

开发者常混淆直接调用函数、传递函数名和传递字符串的效果。以下示例展示了常见误区：

function hello() {
    console.log('I am dada');
}

// 情况1：传递函数名（无参数）- 正确做法
setTimeout(hello, 5000); // 5秒后执行

// 情况2：传递字符串 - 可执行且支持传参，但性能较差（涉及内部eval）
setTimeout('hello()', 3000); // 3秒后执行

// 情况3：直接调用函数 - 立刻执行，而非延迟！
setTimeout(hello(), 8000); // 立即打印 'I am dada'，定时器失效

若需要通过字符串形式传递参数（如带参数的函数），虽然可行，但由于字符串解析会消耗额外性能，推荐优先使用函数引用。当必须传递参数且不想用字符串时，可通过返回匿名函数的闭包方式来处理：

function _hello(_name) {
    return function() {
        hello2(_name);
    };
}

// 正确传递参数的方式
setTimeout(_hello(name), 7000); // 7秒后执行 hello2 并传入 name 参数

规避长耗时任务：为何要用链式 setTimeout？

使用 setInterval 执行频繁任务时，存在一个显著隐患：如果某次回调函数的执行时间超过了设定的间隔时间，会导致多个回调堆积或在队列中被跳过，从而造成逻辑混乱。

setInterval 的风险

例如，设定每 200ms 执行一次，但代码实际执行耗时 600ms。此时，后面的几次定时器触发会被丢弃或瞬间连续触发，失去真正的“间隔”意义，且可能导致内存泄漏或 UI 卡顿。

链式 setTimeout 的标准解法

为了实现真正的周期性执行，无论前一次任务耗时多久，都应在任务完成后的固定间隔再启动下一次定时器。这可以通过在回调内部再次调用 setTimeout（即 arguments.callee 或自引用）来实现：

// 推荐的周期执行写法
setTimeout(function loop() {
    // 要执行的代码
    setTimeout(loop, 2000); // 本次执行完毕后，等待2秒再调度下一次
}, 2000);

// 对比：不推荐的 setInterval 写法（可能产生堆积或丢失）
setInterval(function() {
    // 要执行的代码
}, 200); // 忽略执行时长风险

这种链式调用的优势在于：前一段代码完全执行完毕后，才重新计算等待时间并创建新的定时器实例。它确保了定时器之间有明显的间隔，避免了任务堆积和执行跳过的情况，是处理复杂前端异步逻辑的最佳实践。

以上就是 JavaScript 定时器 SetTimeout 之定时刷新窗口和关闭窗口的详细内容，更多关于 JavaScript 定时器优化与最佳实践的资料请关注本站其它相关文章！