JavaScript setTimeout() – 延迟 N 秒的 JS 计时器 | 您所在的位置:网站首页 › 毫秒计时器单位是多少 › 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 = `Ashley: I had ${food1} and ${food2}.`; } setTimeout(lunchMenu, 3000, "pizza", "salad");超时IDsetTimeout()将返回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 += "Sale ends soon. BUY NOW! "; }, 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 动画和在线游戏。 |
CopyRight 2018-2019 实验室设备网 版权所有 |