各类定时器总结

时间 2020-07-07 标签各类定时器总结

一次性定时器javascript

　　用以指定在一段特定的时间后执行某段程序。css

　　setTimeout()：html

　　格式：[定时器对象名=] setTimeout(“<表达式>”，毫秒)java

　　功能：执行<表达式>一次。express

　　例子：框架

代码以下:函数

<!DOCTYPE html>
<html>
  <head>
    <title>timer1.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
     function count()
     {
         setTimeout("alert('执行成功！')",7000);
     }
    </script>
  </head>
  <body>
    <input type="button" value="点击我啊" onclick="count();">
  </body>
</html>

周期性定时器性能

　　以必定的时间为间隔，不断地重复执行表达式。ui

　　setInterval()：this

　　格式：[定时器对象名=] setInterval(“<表达式>”，毫秒)

　　功能：重复执行<表达式>，直至窗口、框架被关闭或执行clearInterval。

　　clearInterval()：

　　格式：clearInterval(定时器对象名)　　

　　功能：终止定时器

　　例子：

代码以下:

<!DOCTYPE html>
<html>
  <head>
    <title>timer2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
    var sec = 0;
    var timer = setInterval("count();",1000);//页面加载的时候即开始计时
     function count()
     {
        document.getElementById("num").innerHTML = sec++;
     }
     function stopCount()
     {
         clearInterval(timer);//中止定时器的运行
     }
    </script>
  </head>
  <body>
    <font color="red" id="num">0</font>
    <input type="button" value="中止" onclick="stopCount();">
  </body>
</html>

使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果，分别是

window.setTimeout()和window.setInterval。其中前者可使一段代码在指定时间后运行；然后者则可使一段代码每过指定时间就运行一次。它们的原型以下： window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); 其中expression能够是字符串，也能够是函数名。是字符串的时候能够带参数，函数名不能带参数，若是带上参数就直接执行函数了，不会延时。

function hello (){

console.log('I am dada'); //alert('I am ' + name);

//setTimeout(arguments.callee,2000);

} setTimeout(hello,5000);//5秒后执行 setTimeout('hello()',3000);//3秒后执行

setTimeout(hello(),8000);//马上执行

第一种状况是函数名，可是带不了参数

第二种状况是字符串，可执行的js代码，能够带参数，可是性能上比函数名差

第三种是调用函数，直接执行

因此若是想要穿参数，可是又不想经过字符串的形式调用，能够本身来写一个方法：

function _hello(_name){

return function(){

hello2(_name);

}

}

setTimeout(_hello(name),7000);//马上执行

1、setTimeout

setTimeout(function(){

//要执行的代码

},200);

指隔200ms后,定时器代码被添加到队列中,等待JavaScript进程空闲后,代码才执行

2、setInterval

一、上面代码是指每隔200ms就建立一个执行代码的定时器
二、当使用setInterval时,仅当(在队列中)没有该定时器的任何其余代码实例时,才将定时器代码添加到队列中,引用JavaScript高级程序设计第二版书中语句(即：当前一个定时器代码执行时,紧跟后面的第一个定时器代码将添加到队列中,等待执行,再后面的定时器代码不会添加到队列中)

用setInterval来执行反复的行为的时候会遇到一个问题：

当定时器代码执行时间(假如须要600ms才执行完)超过指定间隔(这里是200ms),那么某些定时器代码就会被跳过(即后面的定时器代码不会被添加到队列中),前一个定时器代码执行完毕后,队列中的定时器代码马上执行,各定时器之间的代码执行没有间隔。这时，须要使用链式setTimeout。

这样作的好处是:前一个定时器要执行的代码执行完且等待200ms后,才建立一个新的定时器,并把定时器代码添加到队列中执行即：不会出现定时器代码被跳过的状况;定时器之间的代码执行能够有间隔(根据本身设置)。

setTimeout(function(){

//要执行的代码

setTimeout(arguments.callee,2000);

},2000);

setInterval(function(){

//要执行的代码

},200);