zoukankan      html  css  js  c++  java
  • JavaScript定时器

          JavaScript定时器恢复

          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("时间到");
                 }
             }   

                我的第一篇博客,还望大神们多多指教。

  • 相关阅读:
    e家modem共享上网方法
    千里奔丧
    解决dbvisualizer乱码问题Ubuntu手记之软件
    目录结构Ubuntu手记之系统配置
    javaFTP编程
    JAVA运行环境设置
    VPNCUbuntu手记之软件
    清洗节气门
    IPMSGUbuntu手记之软件
    AIX下的JAVA线程监视
  • 原文地址:https://www.cnblogs.com/nie5135257/p/9030652.html
Copyright © 2011-2022 走看看