zoukankan      html  css  js  c++  java
  • setInterval与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秒后弹出的警示框,被自然叫停了。

    本人正在学习和摸索中,如有错误,欢迎指正!

  • 相关阅读:
    数据库基础
    Junit单元测试、反射与注解
    Stream流
    Java IO所用类
    字符集
    Lambda表达式
    【jdk1.8源码分析】LinkedHashMap
    线性表
    【jdk1.8源码分析】ArrayList
    java学习血泪史
  • 原文地址:https://www.cnblogs.com/showcase/p/10435964.html
Copyright © 2011-2022 走看看