JavaScript setTimeout与clearTimeout计时器用法详解

作者:纸飞机

时间:2026-10-21

浏览:614

本文深入解析JavaScript中setTimeout和clearTimeout函数的具体用法。通过实例演示如何在指定时间后执行动作、实现多个定时任务的叠加执行,以及如何构建开始与停止计数的逻辑。掌握这两个核心API,能有效控制代码执行时机与中断长时间运行的任务。

文章目录

JavaScript定时器核心函数介绍

本文通过具体实例分析JavaScript计时器的使用方法,旨在为读者提供实用的参考指南。

在JavaScript开发中,主要依靠setTimeout和clearTimeout这两个函数来实现计时启动与停止的操作。

首先介绍如何设定特定时间后执行某个动作,例如设置3秒后弹出对话框:

指定时间后执行动作


setTimeout('alert("3s")',5000);

此外,该函数支持链式或叠加使用,例如可以实现连续的时间触发效果:

定时函数的叠加使用


function delay_times(){
   setTimeout('document.getElementById("time_text").innerHTML = "2s"',2000);
   setTimeout('document.getElementById("time_text").innerHTML = "4s"',4000);
   setTimeout('document.getElementById("time_text").innerHTML = "6s"',6000);
}

其次,展示如何实现开始计数与停止计数的完整示例:

开始与停止计数的实现


var count = 0;
var myTimer;
//开始计数
function start_counter(){
   document.getElementById("time_count").innerHTML = count;
   count++;
   myTimer = setTimeout("start_counter()",1000);
}
//停止计数
function stop_counter(){
   clearTimeout(myTimer);
}

相关在线工具推荐

此外,推荐几款时间与计时器相关的实用工具供参考:

在线秒表工具: http://tools.jb51.net/bianmin/miaobiao

Unix时间戳(timestamp)转换工具: http://tools.jb51.net/code/unixtime

在线世界各地时间查询: http://tools.jb51.net/zhuanhuanqi/worldtime

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述内容能对JavaScript程序设计有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章