诚之和:JavaScript setTimeout() – 延迟 N 秒的 JS 计时器
你有没有想过是否有一种方法可以让你的 JavaScript 代码延迟几秒钟?在本文中,我将setTimeout()
通过代码示例解释该方法是什么以及它与setInterval()
.
什么是setTimeout()在JavaScript?
setTimeout()
是一种在定时器运行完成后执行一段代码的方法。
这是该setTimeout()
方法的语法。
let timeoutID = setTimeout(function, delay in milliseconds, argument1, argument2,...);
让我们分解一下语法。
功能
setTimeout()
将设置一个计时器,一旦计时器用完,该功能将运行。
以毫秒为单位的延迟
在此方法中,您可以指定希望函数延迟多少毫秒。1,000 毫秒等于 1 秒。
在本例中,消息将在 3 秒延迟后出现在屏幕上。(3,000 毫秒)
const para = document.getElementById("para");function myMessage() {para.innerHTML = "I just appeared";console.log("message appeared");
}
setTimeout(myMessage, 3000);
如果setTimeout()方法中不存在延迟,则将其设置为零,消息将立即出现。
const para = document.getElementById("para");function myMessage() {para.innerHTML = "No delay in this message";console.log("message appeared immediately");
}
setTimeout(myMessage);
参数
你还可以将可选参数传递给函数。
在此示例对话中,Britney 将提出问题,Ashley 的回复将延迟 3 秒。它将包括lunchMenu
函数中的两个可选参数。
const ashley = document.getElementById("ashley");function lunchMenu(food1, food2) {ashley.innerHTML = `<strong>Ashley: </strong>I had ${food1} and ${food2}.`;
}setTimeout(lunchMenu, 3000, "pizza", "salad");
超时ID
setTimeout()
将返回timeoutID
定时器的正整数和唯一 ID。
清除超时()
此方法用于取消setTimeout()
. 在方法内部,您必须引用timeoutID
.
这是基本语法。
clearTimeout(timeoutID)
在此示例中,消息将在 10 秒(10,000 毫秒)延迟后出现。但是如果用户点击Stop Timer
按钮,那么setTimeout()
将被取消。 const timerMsg = document.getElementById("message1");
const stopBtn = document.getElementById("stop");function timerMessage() {timerMsg.innerHTML = "Thanks for waiting!";
}let timeoutID = setTimeout(timerMessage, 10000);stopBtn.addEventListener("click", () => {clearTimeout(timeoutID);timerMsg.innerHTML = "Timer was stopped";
});
你应该为 setTimeout() 传入一个字符串而不是一个函数
传递字符串而不是函数被认为是不好的做法和安全风险。
避免这样写setTimeout()
:
setTimeout("console.log('Do not do this');", 1000);
一些代码编辑器会警告您并建议您改用函数。
在这种情况下,始终使用函数而不是字符串。
setTimeout(function () {console.log("Do this instead");
}, 1000);
如何setInterval()从不同setTimeout()?
与setTimeout()
在延迟后仅执行一次函数不同,setInterval()
它将每隔设定的秒数重复一次函数。如果你想停止setInterval()
,那么你使用clearInterval()
.
setInterval()
与setTimeout()
的语法:
let intervalID = setInterval(function, delay in milliseconds, argument1, argument2,...);
在这个例子中,我们有一条每秒被打印到屏幕上的销售信息。
let intervalID = setInterval(() => {salesMsg.innerHTML += "<p>Sale ends soon. BUY NOW!</p>";
}, 1000);
在setTimeout()
方法内部,我们使用clearInterval()
10 秒后停止打印消息。
setTimeout(() => {clearInterval(intervalID);
}, 10000);
就像 with 一样setTimeout()
,您必须在方法中使用计时器的唯一 ID clearInterval()
。
真实项目示例
现在,我们知道如何setTimeout()
和setInterval()
工作,让我们来看看它是如何能应用到实际功能,在网站上的例子。
在这个例子中,我们有一个进度条,它会在页面加载 2 秒后开始。在 中setTimeout()
,只要条形宽度不是 100% ,我们setInterval()
就会执行该animate()
函数。
setTimeout(() => {let intervalID = setInterval(() => {if (barWidth === 100) {clearInterval(intervalID);} else {animate();}}, 100);//this sets the speed of the animation
}, 2000);
在animate()
函数内部,我们有另一个setTimeout()
在进度条已满时将显示 100% 。
const animate = () => {barWidth++;progressBar.style.width = `${barWidth}%`;setTimeout(() => {loadingMsg.innerHTML = `${barWidth}% Completed`;}, 10100);
};
进度条只是您可以使用setTimeout()
和创建的众多动画之一setInterval()
。您也可以在构建在线游戏时使用这些方法。
结论
setTimeout()
是一种在定时器运行完成后执行一段代码的方法。
延迟以毫秒为单位设置,1,000 毫秒等于 1 秒。
如果setTimeout()
方法中省略了延迟,则延迟设置为 0,函数将执行。
您还可以将可选参数传递给函数。
setTimeout()
将返回timeoutID
定时器的正整数和唯一 ID。
出于安全原因,不要使用字符串代替函数,这一点很重要。
如果要取消,setTimeout()
则需要使用clearTimeout()
如果您想在设定的秒数内重复执行一段代码,那么您可以使用setInterval()
.
setTimeout()
可用于构建基本的 JavaScript 动画和在线游戏。
诚之和:JavaScript setTimeout() – 延迟 N 秒的 JS 计时器相关推荐
- JavaScript setTimeout函数
setTimeout的作用:延迟一段时间执行某个函数. 例如:setTimeout(function(){alert("延迟5秒执行...")},5000); 注意:setTime ...
- js 延迟几秒执行_深入研究 Node.js 的回调队列
队列是 Node.js 中用于有效处理异步操作的一项重要技术. 在本文中,我们将深入研究 Node.js 中的队列:它们是什么,它们如何工作(通过事件循环)以及它们的类型. Node.js 中的队列是 ...
- Javascript setTimeout()
文章目录 示例 1:3 秒后显示一次文本 示例 2:每 3 秒显示一次时间 JavaScript clearTimeout() 示例 3:使用 clearTimeout() 方法 参考文档 在 ...
- javascript setTimeout 参数最大值问题和递归调用
javascript setTimeout 参数最大值问题和递归调用 这是一段最简单的代码 setTimeout(() => {console.log('3s后触发'); }, 3000); 但 ...
- 超简单JS延迟5秒加载方法代码
JS延迟5秒加载方法 setTimeout( function(){ //add your code }, 5 * 1000 ); //延迟5000毫米 5000等于5秒哦
- swift golang java,解决两数之和 (Javascript, Java, C#, Swift, Kotlin, Python,C++, Golang)
解决两数之和(Javascript, Java, C#, Swift, Kotlin, Python,C++, Golang) 给定一个整数数组,返回两个数字的索引,以便它们加起来成为一个特定的目标. ...
- 单片机设置12分频c语言,AT89C51单片机,如何实现延迟一秒
满意答案 爱在身边lovely 2013.09.07 采纳率:59% 等级:12 已帮助:7408人 其实可以用C语言实现的,先要定义好定时器的初值 不管你使用多大的晶振,使用51单片机,一般都 ...
- php 第一次创建文件时延迟4秒 sleep用法
/** ** @name 彩票种类 * @uid 帐号uid * @token * @以上参数,付费就有了,这种接口不支持测试,主要获取重庆时时彩最近十条的 ...
- JavaScript网页制作--五秒后自动跳转页面
JavaScript网页制作–五秒后自动跳转页面 通常在浏览一些网站时,会出现网页不存在的情况,网页不存在之后,有些网站会在5秒后自动跳转到一个新的网页,比如网站的首页.可以利用定时器和locatio ...
最新文章
- 使用antd UI组件有感
- 进一步解 apt-get 的几个命令
- How CRM_JEST is influenced by status change in WebUI
- PostgreSQL DISTINCT用法
- BABOK - 开篇:业务分析知识体系介绍
- Poor God Water【矩阵快速幂】
- Spring Boot项目实战:BBT版西蒙购物网
- P Laguna/ A database for evaluation of algorithms for measurement of QT and other waveform interval
- linux shell执行perl脚本,无法在Shell脚本中运行Perl脚本
- 施耐德M241 plc与IAI伺服电缸通过ethernet/ Ip通讯,plc与伺服套装,送软件和资料
- 系统分析师成长之路 转
- 最强代码审查工具报告
- Excel查询A列中的数据是否在B中存在
- 什么人最适合读研呢?你适不适合读研究生?
- php实现积分加头像排行榜,PHPCMS首页GET调用标签会员积分与头像前十名
- JavaScript replace 强行保留后三位小数点
- 什么鬼畜耳机品牌会叫做233621
- 哲学家与心理学家在选择性知觉上的不谋而合
- 狼人杀总结之“警下预言家 必是真预言家”
- Summernote文字编辑器添加代码插入功能
热门文章
- 经典回合制策略游戏幽浮 2 for Mac
- 一文弄懂MySQL的最大连接数
- Java开发【Spring之AOP详解(xml--注解->方法增强、事务管理(声明事务的实现))】
- 企业软文营销年度计划如何激发“内容篝火”
- 调用dubbo接口返回timeout_dubbo之timeout超时分析
- Xcode 编译错误 之 redefinition of ‘...’
- 新起典| 探秘文旅跨界融合新业态
- 文本内容限制----掩码限制
- linux下怎么配置显卡,Linux系统如何配置双显卡?
- Kotlin-简约之美-进阶篇(三):Lambda的使用详解