• setInterval和setTimeout的区别


    在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待多时时间后再开始执行,就像在我们的生活中一样,待会儿再开始做一件事。在JavaScript中主要通过定时器实现此类需求,本文将对定时器做一个概括,正对setTimeout()做一个详细用法总结。

    一.setInterval与setTimeout的区别

    setInterval
    setInterval()方法可按照指定的周期来调用函数或者计算表达式(以毫秒为单位)
    语法:
    setInterval(函数表达式,毫秒数);
    setInterval()会不停的调用函数,直到clearInterval()被调用或者窗口被关闭,由 setInterval()返回的ID值可用作clearInterval()方法的参数。
    setTimeout
    setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式(以毫秒为单位)
    语法:
    setTimeout(函数表达式,毫秒数);
    setTimeout()只执行函数一次,如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()
    区别
      通过以上分析可以看出,setTimeout与setInterval的主要区别是:
      setTimeout()方法只运行一次,也就是说当达到设定的时间后就出发运行指定的代码,运行完后就结束了,如果还想再次执行同样的函数,可以在函数体内再次调用setTimeout(),可以达到循环调用的效果。
      setInterval()是循环执行的,即每达到指定的时间间隔就执行相应的函数或者表达式,是真正的定时器。

    二.setTimeout()的用法

    先写个最简单的demo,如下:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="utf-8">
    5. <script>
    6. setTimeout("alert('hello')",2000);
    7. </script>
    8. </head>
    9. <body>
    10. </body>
    11. </html>

    页面会在停留2秒之后弹出对话框,注意setTimeout不会自动重复执行!
    当然,setTimeout也可以执行function,还可以不断重复执行!
    你可以看到h1中的文本数字在一秒一秒地递增!
    更加灵活的是,你还可以指定重复执行的次数,如下:
    if判断中的数字,是用来限制重复执行次数的条件。

    三.clearTimeout()

    要使用clearTimeout(),需要我们设定setTimeout()时, 给予这setTimeout()一个名称, 这名称就是timeoutID ,我们叫停时,就是用这 timeoutID 来叫停

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="utf-8">
    5. <script>
    6. var timeId= setTimeout("alert('hello')",2000);
    7. clearTimeout(timeId);
    8. </script>
    9. </head>
    10. <body>
    11. </body>
    12. </html>

    原计划1秒后弹出的警示框,被自然叫停了。

  • 相关阅读:
    跨时钟域问题(三)异步FIFO的Verilog实现(格雷码)
    备份系统运行数据采集及分析方法
    Python 继承和子类示例:从 Person 到 Student 的演示
    pdf文档打不开是怎么回事?
    008:连续跌三天,买第四天上涨的盈利计算
    从0到一搭建Kafka-单机版-通过单机版zookeeper配置
    WEB自动化_PO模式设计原理和设计规范
    【目标检测算法】YOLO-V5实战检测VOC2007数据集
    学会Spring Cloud微服务架构绝活,渣本也能进大厂
    洛谷P2412 查单词
  • 原文地址:https://blog.csdn.net/webot1/article/details/132827975