引用:

setTimeout和setInterval两者的区别

setTimeout和setInterval的优缺点

setTimeout和setInterval详解

两者的作用都是在定时多少毫秒后回调（函数），不同在于

1. 执行次数，setTimeout在一个固定时间后回调一次函数。而setTimeout可以循环回调

　　e.g. 1) 定义变量初始值为0，当定时器Timer使用setTimeout回调时，此时变量结果为2（在页面调用一次函数后setTimeout回调一次函数）。

  1.  <body onload="myFunction()">
  2.      <p id="demo"></p>
  3.      <script>
  4.          var i = 0;
  5.          function myFunction()
  6.          {
  7.              i++;
  8.              document.getElementById("demo").innerHTML = i;
  9.  
  10.          }
  11.          var timer = setTimeout(function(){myFunction()},500);
  12.  
  13.      </script>
  14.  </body>

　　e.g. 2) 同样定义变量初始值为0，当定时器Timer使用setInterval回调时，此时变量呈现每0.5秒加1的计时效果。

  1.  <body onload="myFunction()">
  2.      <p id="demo"></p>
  3.      <script>
  4.          var i = 0;
  5.          function myFunction()
  6.          {
  7.              i++;
  8.              document.getElementById("demo").innerHTML = i;
  9.  
  10.          }
  11.          var timer = setInterval(function(){myFunction()},500);
  12.  
  13.      </script>
  14.  </body>

　　e.g. 3) 如果把setTimeout计时器写入到函数中，这时也能达到上述第二例的效果（此方法会导致函数运行的内存负担增加，不推荐）

  1. <body onload="myFunction()">
  2.     <p id="demo"></p>
  3.     <script>
  4.         var i = 0;
  5.         function myFunction()
  6.         {
  7.             i++;
  8.             document.getElementById("demo").innerHTML = i;
  9.             var timer = setTimeout(function(){myFunction()},500);
  10.         }
  11.     </script>
  12. </body>

今天就先写到这儿吧

20180904 定时器setTimeout和setInterval回调问题的更多相关文章

  1. 定时器setTimeout()和setInterval()使用心得整理

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...

  2. 有关定时器setTimeout()、setInterval()详解

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. setTimeout() setTimeout函数用 ...

  3. 高级定时器-setTimeout()、setInterval()、链式setTimeout()

    使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能.执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript ...

  4. Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval

    定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...

  5. JS 定时器 setTimeout 与 setInterval 的区别和用法

    定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...

  6. 使用定时器settimeout、setInterval执行能传递参数的函数

    无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决.经网上查询后整理如下: 例如对于 ...

  7. 如何使用定时器settimeout、setInterval执行能传递参数的函数(转)

    来自: http://www.cnblogs.com/wkylin/archive/2012/09/07/2674911.html var userName="jack";//根据 ...

  8. javascript定时器:setTimeout与setInterval

    概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...

  9. JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结

    已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...

随机推荐

  1. 【工具篇】Sublime Text 2/3 安装汉化破解、插件包安装教程详解

    Sublime Text概述: Sublime Text是一个代码编辑器,也是HTML和散文先进的文本编辑器. 漂亮的用户界面和非凡的功能,例如:迷你地图,多选择,Python插件,代码段等等. 完全 ...

  2. IOS UILabel的一些使用小技巧

    1. 你在iOS6的需要NSLineBreakByWordWrapping 为了您的代码试试这个: NSString *string = @"bla"; CGSize s = [s ...

  3. SpringMVC之一个简单的例子

    一.一个简单的例子 二.web.xml文件配置 三.spring-mvc.xml文件(等同于struts2的struts文件) 四.login.jsp(登录页面) 五.登录成功的页面(success. ...

  4. Windows3

    windows安装后的配置 没有网络适配器, 将USB中的驱动精灵的安装程序安装在win上, 启动精灵, 提示无法连接到网络, 使用Android类型的手机中的QQ浏览器扫码下载 win会有一些开机自 ...

  5. （译）Cg Programming/Unity（Cg编程/Unity）

    最近在学习Unity3d中的shader编程,能找到的中文资料比较少,于是,尝试翻译一下wiki Books上的资料,以方便其他跟我一样的入门学习者.由于是第一次翻译技术资料,经验不足,难免出错,请路 ...

  6. NIO学习之Channel

    一.Channel基础 通道是一个对象,通过它可以读取和写入数据,Channel就是通向什么的道路,为数据的流向提供渠道: 在传统IO中,我们要读取一个文件中的内容使用Inputstream,该str ...

  7. linux-2.6.22.6/Makefile:416: *** mixed implicit and normal rules: deprecated syntax

    今天在按照韦东山大哥的教程流程编译内核的时候出现了这个问题      linux-2.6.22.6/Makefile:416: *** mixed implicit and normal rules: ...

  8. vue-cli 该如何正确打包iconfont？

    其实这种问题应该问google的: got wrong bootstrap font path after building · Issue #166 · vuejs-templates/webpac ...

  9. JavaScript笔记2

    1.浮点数在运算过程中会产生误差,因为计算机无法精确表示无限循环小数. 要比较两个浮点数是否相等,只能计算它们之差的绝对值,看是否小于某个阈值(某个可接受的范围):Math.abs(1 / 3 - ( ...

  10. [PCL]对‘pcl::visualization::CloudViewer::CloudViewer(std::string const&)’未定义的引用

    pcl::visualization::CloudViewer viewer("Cloud Viewer"); 这个时候报错. 试了很多方法,有人说,targe t_link 时候 ...