手机版
你好,游客 登录 注册
背景:
阅读新闻

JavaScript定时器初步认识

[日期:2018-05-13] 来源:Linux社区  作者:nie5135257 [字体: ]

Windows对象包含了4个定时器方法,说明如下表所示:

Windows对象定时器方法列表

方法 说明
setTimeout() 在指定的毫秒数后调用函数或计算表达式
setInterval() 按照在指定的周期(以毫秒计)来调用函数或计算表达式
clearTimeout() 取消setTimeout()方法生成的定时器对象
clearInterval() 取消setInterval()方法生成的定时器对象

1. setTimeout()方法

          setTimeout()方法在指定的时间段后执行的代码。其中拥有两个参数值,分别是code和delay,其中参数code表示要延迟执行的代码,可以包含多个语句,语句之间要用分号进行分隔,delay表示要延迟的时间,以毫秒为单位计时。

          示例:当鼠标经过段落文本时时显示 “段落文本”。

          var p=document.getElementsByTagName("p")[0];
          p.onmouseover=function(){
              setTimeout(function(){
                  alert(“段落文本”);
              },1000);
          }

        也可将JavaScript代码封装在函数体内,然后引用函数作为参数传递给setTimeout()方法,这样就可以避免了传递代码众多而造成不必要的麻烦。

        示例:如何为集合中每一个元素绑定延迟事件。

        var o=document.getElementsByTagName("body")[0].childNodes;//获取body元素下所用子元素
        for(var i=0;i<o.length;i++){
            o[i].onmouseover=function(i){
                return function(){
                    f(o[i]);  //将js代码封装在一个函数体中作为参数传给setTimeout
                }
            }(i);
        }
        function f(o){
            var out=setTimeout(function(){
                alert(o.tagName)
            },500);
        }

                这样就可以当鼠标经过body元素下的子元素时,延迟半秒后弹出该元素的名称。

      2. clearTimeout()方法

              clearTimeout()方法表示在特定的情况下清除要延迟的代码,这样就可以避免了函数之间的互相干扰。

              列如:当鼠标停留在某个元素时,半秒后才会弹出提示信息,一旦鼠标提前离开该元素,就立即清除前面定义的延迟处理事件函数。

        var o=document.getElementsByTagName("body")[0].childNodes;
        for(var i=0;i<o.length;i++){
            o[i].onmouseover=function(i){
                return function(){
                    f(o[i]); 
                }
            }(i);
            o[i].onmouseout=function(i){
                return function(){
                    clearTimeout(o[i].out);//清除延迟处理的函数
                }
            }(i);
        }
        function f(o){
            o.out=setTimeout(function(){
                alert(o.tagName)
            },500);
        }

                也可以这这样使用clearTimeout()方法:

                示例:在文本框中按秒针速度显示递增的数字,当循环10次后调用clearTimeout()方法清除对延迟代码的执行,并弹出提示信息。

        <body>
        <input type="text" />
        </body>
        <script>   
        var t=document.getElementsByTagName("input")[0];
        var i=1;
        function f(){
            var out=setTimeout(
                function(){
                    t.value=i++;
                    f();
                },1000);
                if(i>10){
                    clearTimeout(out);
                    alert("时间到");
                }
        } 
        f();
        </script>

          3. setInterval()方法

              setInterval()方法的用法和setTimeout()方法的用法基本相同,其中参数为code和interval,只是参数code表示要周期性执行的代码,参数interva表示周期的时间间隔,也是以毫秒为单位。

              如上的示例:在文本框中按秒针速度显示递增的数字,当循环10次后调用clearTimeout()方法清除对延迟代码的执行,并弹出提示信息。

            //setInterval()用法和setTimeout()用法相同,只是code改为了周期性,即每个多久执行一次代码
        var t=document.getElementsByTagName("input")[0];
        var i=1;
        var out=setInterval(f,1000);//定义周期性执行的函数
        function f(){
            t.value=i++;
            if(i>10){
              clearTimeout(out);
              alert("时间到");
            }
        } 

本文永久更新链接地址https://www.linuxidc.com/Linux/2018-05/152358.htm

linux
相关资讯       JavaScript定时器 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导���的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款