• 各种定时器总结


    一次性定时器

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

      setTimeout():

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

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

      例子:

    代码如下:

    <!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>

    周期性定时器

      以一定的时间为间隔,不断地重复执行表达式。

      setInterval():

      格式:[定时器对象名=] 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);//立刻执行

    一、setTimeout

    setTimeout(function(){
    
    //要执行的代码
    
    },200);

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

    二、setInterval

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

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

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

    这样做的好处是:前一个定时器要执行的代码执行完且等待200ms后,才创建一个新的定时器,并把定时器代码添加到队列中执行即:不会出现定时器代码被跳过的情况;定时器之间的代码执行可以有间隔(根据自己设置)。

    setTimeout(function(){
    
    //要执行的代码
    
    setTimeout(arguments.callee,2000);
    
    },2000);
    
    setInterval(function(){
    
    //要执行的代码
    
    },200);
  • 相关阅读:
    UVa OJ 148 Anagram checker (回文构词检测)
    UVa OJ 134 LoglanA Logical Language (Loglan逻辑语言)
    平面内两条线段的位置关系(相交)判定与交点求解
    UVa OJ 130 Roman Roulette (罗马轮盘赌)
    UVa OJ 135 No Rectangles (没有矩形)
    混合函数继承方式构造函数
    html5基础(第一天)
    js中substr,substring,indexOf,lastIndexOf,split等的用法
    css的textindent属性实现段落第一行缩进
    普通的css普通的描边字
  • 原文地址:https://www.cnblogs.com/yingleiming/p/7611610.html
Copyright © 2020-2023  润新知