zoukankan      html  css  js  c++  java
  • setTimeout与setInterval的区别

    setTimeout与setInterval的区别:
    1、setTimeout设置后隔指定时间后只会执行一次
    2、setInterval设置后会每隔指定时间执行一次
    3、setTimeout一般在方法内部使用达到循环调用的效果
    4、setInterval一般在方法外部使用就可以达到循环调用效果

    setTimeout例子:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" language="javascript">
     var timeout;
     //显示时间
     function displayTime(){
      var date = new Date();
      var hour = date.getHours();
      hour = hour<10?"0"+hour:hour;
      var minute = date.getMinutes();
      minute = minute<10?"0"+minute:minute;
      var second = date.getSeconds();
      second = second<10?"0"+second:second;
      //将时、分、秒组成时间
      var time = hour+":"+minute+":"+second;
      //将时间显示在文本框中
      document.getElementById("txtTime").value = time;
      //参数一:要调用的函数  参数二:延迟时间  返回值:Timeout对象
      timeout = window.setTimeout("displayTime()",1000);
     }
     function stopTime(){
      window.clearTimeout(timeout);//清除Timeout对象
     }
     function continueTime(){
      timeout = window.setTimeout("displayTime()",1000); 
     }
    </script>

    </head>

    <body onload="displayTime()">
    <input type="text" id="txtTime" />
    <input type="button" onclick="stopTime()" value="停止" />
    <input type="button" onclick="continueTime()" value="继续" />

    </body>

    </html>

    setInterval例子;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" language="javascript">
     var timeout;
     //显示时间
     function displayTime(){
      var date = new Date();
      var hour = date.getHours();
      hour = hour<10?"0"+hour:hour;
      var minute = date.getMinutes();
      minute = minute<10?"0"+minute:minute;
      var second = date.getSeconds();
      second = second<10?"0"+second:second;
      //将时、分、秒组成时间
      var time = hour+":"+minute+":"+second;
      //将时间显示在文本框中
      document.getElementById("txtTime").value = time;
     }
     function stopTime(){
      window.clearTimeout(timeout);//清除Timeout对象
     }
     function continueTime(){
      timeout = window.setInterval("displayTime()",1000); 
     }
     timeout = window.setInterval("displayTime()",1000);
     //window.onload窗体加载事件,后面接的函数不能加左右小括号
     //window.onload = displayTime();//不会调用函数,会没效果
     window.onload = displayTime;//正确
    </script>

    </head>

    <body>

    <input type="text" id="txtTime" />

    <input type="button" onclick="stopTime()" value="停止" />

    <input type="button" onclick="continueTime()" value="继续" />

    </body>

    </html>

  • 相关阅读:
    [微软官方]SQLSERVER的兼容级别
    使用 OPENJSON 分析和转换 JSON 数据 (SQL Server)
    WPF 解决TreeViewItem上为IsMouseOver 时 父级Item也会 受影响
    依赖注入
    关于编译告警 C4819 的完整解决方案
    你想知道的 std::vector::push_back 和 std::vector::emplace_back
    如何使用 Dump 文件?
    关于 PDB 文件你需要知道什么?
    图解哈希表及其原理
    C++ 中的虚函数表及虚函数执行原理
  • 原文地址:https://www.cnblogs.com/danmao/p/3815852.html
Copyright © 2011-2022 走看看