温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

setTimeout和setInterval的用法

发布时间:2020-07-29 09:43:16 来源:网络 阅读:430 作者:web全栈 栏目:web开发

JavaScript 计时事件

JavaScript可以按时间间隔执行。这称为计时事件。window对象允许以指定的时间间隔执行代码。这些时间间隔称为定时事件。与JavaScript一起使用的两个关键方法是:

setTimeout(function, milliseconds)
在等待指定的毫秒数后执行一个函数。

setInterval(function, milliseconds)
与setTimeout()相同,但是连续重复执行该函数。

setTimeout()和setInterval()是HTML DOM Window对象的方法。

setTimeout()方法
//语法:
window.setTimeout(function, milliseconds);
window.setTimeout()可以在没有window前缀的情况下编写该方法。

第一个参数是要执行的函数。第二个参数表示执行前的毫秒数。

单击按钮。等待3秒钟,页面将提示“Hello”:

<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
  alert('Hello');
}
</script>

如何停止执行setTimeout?
clearTimeout()方法停止执行setTimeout()中指定的函数。

window.clearTimeout(timeoutVariable)
window.clearTimeout()可以在没有window前缀的情况下编写该方法。

clearTimeout()方法使用从setTimeout()以下返回的变量:

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

如果函数尚未执行,则可以通过调用clearTimeout()方法来停止执行:

与上面的示例相同,但添加了“停止”按钮: 

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>

setInterval()方法
setInterval()方法在每个给定的时间间隔重复给定的函数。

window.setInterval(function, milliseconds);
window.setInterval()可以在没有window前缀的情况下编写该方法。

第一个参数是要执行的函数。

第二个参数表示每次执行之间的时间间隔的长度。

此示例每秒执行一次名为“myTimer”的函数(如数字手表)。

var myVar = setInterval(myTimer, 1000);
function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

如何停止执行setInterval?
clearInterval()方法停止执行setInterval()方法中指定的函数。

window.clearInterval(timerVariable)
window.clearInterval()可以在没有window前缀的情况下编写该方法。

clearInterval()方法使用从setInterval()以下返回的变量:

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

与上面的示例相同,但我们添加了“停止时间”按钮:

<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

更多HTML BOM Window对象的方法

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI