javascript 不停(setInterval)/延时(setTimeout)函数

时间 2020-10-06

标签 javascript html java dom ide 函数动画 spa 线程 htm 栏目 JavaScript 繁體版

原文原文链接

1、
setTimeout(script,millisecond); 是从如今算起多少微秒后运行该代码（只运行一次）

setInterval(script,millisecond); 是每隔多少微秒运行一次代码

示例:
1.执行一次

< span id ="time" ></ span > 秒
< script type ="text/javascript" >
var i = 1 ;
var txt = document.getElementById( " time " );
function addT(i) {
txt.innerHTML = i;
}
setTimeout("addT(i++)",1000);
</ script >

2.复制执行

< span id ="time" > 3 </ span > 秒
< script type ="text/javascript" >
var i = 1 ;
var txt = document.getElementById( " time " );
function addT(i) {
txt.innerHTML = i;
}
setInterval( " addT(i++) " , 1000 );
</ script >

setTimeout也能够作成重复执行

< span id ="time" ></ span > 秒
< script type ="text/javascript" >
var i = 1 ;
var txt = document.getElementById( " time " );
function addT(i) {
txt.innerHTML = i;
setTimeout( " addT(i++) " , 1000 );
}
addT(i);
</ script >

------------------------------------------------------------------------------------------------------------------

2、精解window.setTimeout()使用方式与参数传递问题

[setTimeout]
setTimeout(表达式,延时时间)
在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次

用setTimeout实现的自动变化显示随机数的效果:
<html>
<head>
    <script>
      window.onload=sett;
      function sett()
      {
        document.body.innerHTML=Math.random();
        setTimeout("sett()",500);
      }
    </script>

  </head>
<body>
</body>
</html>

[setInterval]
setInterval(表达式,交互时间)
则不同,它从载入后,每隔指定的时间就执行一次表达式

用setInterval实现的自动变化显示随机数的效果:
<html>
<head>
    <script>
      function sett()
      {
        document.body.innerHTML=Math.random();
      }
      setInterval("sett();", 500);
    </script>
</head>
<body>
</body>
</html>

在使用JScript的时候，咱们有时须要间隔的执行一个方法，好比用来产生网页UI动画特效啥的。这时咱们经常会使用方法setInterval或 setTimeout，可是因为这两个方法是由脚本宿主模拟出来的Timer线程，在经过其调用咱们的方法是不能为其传递参数。
    咱们经常使用的使用场景是：
    window.setTimeout("delayRun()", n);
    window.setInterval("intervalRun()", n);
    window.setTimeout(delayRun, n);
    window.setInterval(intervalRun, n);

    显然强行代参数的调用： window.setTimeout("delayRun(param)", n);
    window.setInterval("intervalRun(param)", n);
    window.setTimeout(delayRun(param), n);
    window.setInterval(intervalRun(param), n);
    都是错误的，由于string literals形式的方法调用，param必须是全局变量(即window对象上的变量)才行；而 function pointer形式的调用，彻底错误了，这是把函数的返回值当成了setTimeout/setInterval函数的参数了，彻底不是咱们所望的事情      解决这个问题的办法可使用匿名函数包装的方式，在如下scenario中咱们这么作：      function foo()      {           var param = 100;           window.setInterval( function(){ intervalRun(param); }, 888);      }      function interalRun(times)      {          // todo: depend on times parameter      }