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方法主要实现周期性执行代码。

     

  • 相关阅读:
    深度图像的获取原理
    第二章 排序 || 第19节 最短子数组练习题
    第二章 排序 || 第18节 有序矩阵查找练习题
    tensorflow 之tf.nn.depthwise_conv2d and separable_conv2d实现及原理
    tensorflow 之常见模块conv,bn...实现
    机器学习中的训练数据不平衡问题
    一些智力题
    Pytoch 抽取中间层特征方法
    娱乐一下
    java访问ad域
  • 原文地址:https://www.cnblogs.com/xiaowie/p/10593624.html
Copyright © 2011-2022 走看看