zoukankan      html  css  js  c++  java
  • BOM-使用定时器

    window对象包含4个定时器专用方法,说明如下表所示,使用它们可以实现代码定时运行,避免连续执行,这样可以设计动画

    方法 说明
    setInterval() 按照指定的周期,(以毫秒为单位)来调用函数或计算表达式      循环执行
    setTimeout() 在指定的毫秒数后调用函数或计算表达式           执行一次
    clearInterval() 取消由setInterval()方法生成的定时器对象
    clearsetTimeout() 取消由setTimeout()方法生成的定时器对象

     

    setTimeout()方法

      setTimeout()方法能够在指定的时间段后执行特定代码,用法如:

      var o=setTimeout(code,delay)

        参数code表示要延迟执行的代码字符串,该字符串语句可以在window环境下执行,如果包含多个语句,应该使用分号进行分割。

      delay表示延迟的时间,以毫秒为单位,该方法返回的值是一个TimerID,这个ID编号指向延迟执行的代码控制句柄,如果把这个句柄

      传递给clearTimeout()方法,则会取消代码的延迟执行。

          

    var p=document.getElementsByTagName("p")[0];
    p.onclick=function(){
        var b=setTimeout(function(){
            alert(p.style.color="red");
        },5000);
    
         clearTimeout(b);         //清除timeout延迟
    }

    setTimeout()方法的第1个参数虽然是字符串,但是我们也可以把javascript代码封装在一个函数体内,然后把喊出引用作为参数传递给setTimeout()方法,

    等待延迟调用,这样就避免了传递字符串的疏漏和麻烦。注意:函数可以作为参数,作为值,作为表达式

     

    setInterval()方法

      使用setTimeout()方法模拟循环执行指定代码,不如直接setInterval()方法来实现,setInterval()方法能够周期性执行指定的代码,如果不加以处理,那么该方法将会被持续

    执行,知道浏览器窗口关闭,或者跳转到其他页面为止。用法如下

      var a=setInterval(code,Interval);

      该方法的用法与setTimeout()方法基本相同,其中参数code表示要周期执行的代码字符串,而Interval参数表示周期执行的时间间隔,以毫秒为单位,该方法返回的值是一个TimerID

    ,这个ID编号指向对当前周期函数的执行引用,利用该值对计时器进行访问,如果把这个值传递给clearInterval()方法,则会强制取消周期性执行的代码。

    var p=document.getElementsByTagName("p")[0];
    var out=setInterval(f,1000);
    var i=0;
    function f(){
        p.innerText=i++;
        if(i>10){
           clearInterval(out);
           alert("10秒钟已经到了");
        }
    }
    

     setTimeout和setInterval方法在用法上有几分相似,不过两者的作用区别也很明显,setTimeout方法主要用来延迟代码执行的,而setInterval方法主要实现周期性执行代码。

     

  • 相关阅读:
    文件系统恢复!
    磁盘坏道故障!
    磁盘空间耗尽故障!
    卡方——实例(含源码 python)
    TFIDF代码实现
    最标准化步骤(大数据项目首选 Java):提取特定字段地域内容、转化为标准地域(含网络接口、demo、源码、地域数据(csv格式)) 调整指定字段,即可运行获得正确值
    运用DBN 自定义图片输入源码(python3 可直接运行,亲测可用)
    读取tfrecord 代码——可用任意照片均可2
    制作tfrecord 代码——可用任意照片均可
    MYSQL 合并多行数据(指定字段,合并主要重复,个别字段层次不齐现象)
  • 原文地址:https://www.cnblogs.com/xiaowie/p/10593624.html
Copyright © 2011-2022 走看看