javascript的计时器简单介绍

最新推荐文章于 2023-11-01 13:47:56 发布

pleasecallme_522

最新推荐文章于 2023-11-01 13:47:56 发布

阅读量747

点赞数

分类专栏： javascript学习文章标签： javascript

本文链接：https://blog.csdn.net/pleasecallme_522/article/details/53023240

版权

javascript学习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

首先来介绍计时器setInterval（）的概念和使用方法：
1.setInterval(函数，毫秒)：计时器是一个带有时间概念的东西，表示每间隔多少毫秒的时间执行一次函数体内的代码。类似于循环结构，不过与循环结构仍然存在一些差异：当程序一旦进入循环结构，必须将循环体内的语句执行完毕出循环之后才能执行其他语句。而计时器只需要在到达某时间间隔的时候执行一次函数体内额代码即可，其他时间仍然可以执行其他语句
2.使用方法示例：

<script>
    var i=0;
    function fn(){
        document.title=++i;
    }
    setInterval(fn,300);//此处只能使用函数名，不能写成函数名（），否则函数调用一次后结束，计时器不起作用
</script>

由上例可以看出来计时器的使用方法是：setInterval(要执行的函数，间隔时间),这也是除了函数名（），元素.事件=函数之外的第三种调用函数的方法
注：计时器的时间单位是毫秒，最小时间间隔是20及以上

3.计时器的清除：clearInterval(),括号内是想要清除掉的计时器。通常情况下，在创建计时器的时候会将计时器赋给一个变量，清除时直接清除那个变量即可，例如：

    var timer = null; 
    var i =0;
    function fn1(){
        document.title = i;
        i++;
        if(i===10){
            clearInterval(timer);
        }
    }
    timer = setInterval(fn1,1000);

计时器练习1：设置两个按钮，一个’换背景’，一个’停’，并给body设置一个背景（如1，2，3，4放数组里），点击’换背景’时，每隔3秒变成下一张，点击’停’则不再切换

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{background-image:url(img/1.png);}
</style>
</head>
<body>
<input type="button" value="换背景"/>
<input type="button" value="停"/>
<script>
var aBtn = document.getElementsByTagName('input');
var timer = null;
aBtn[0].onclick = function(){
    clearInterval(timer);
    timer=setInterval(fn1,1500);
};
var i = 1;
function fn1(){
    if(i>=4){
        i=1;
    }else{
        i++;
    }
    document.body.style.backgroundImage = 'url(img/' +i+ '.png)';
}
aBtn[1].onclick = function(){
    clearInterval(timer);
};
</script>
</body>

计时器练习2：用开关的方法把这个功能集中在一个按钮上面

<body>
<button id="btn1">更换背景</button>
<script>
    var oBtn1=document.getElementById("btn1");
    var arr=['img/1.png','img/2.png','img/3.png','img/4.png'];
    var timer=null;
    var i=0;
    document.body.style.backgroundImage="url("+"img/1.png)";
    var judge=true;
    oBtn1.onclick=function(){

        if(judge)
        {timer=setInterval(fn1,1000);judge=false;}
        else{clearInterval(timer);judge=true;}
    }
    function fn1(){
        i++;
        if(i==3){
            i=0;
        }
        document.body.style.backgroundImage="url("+arr[i]+")"
    }
</script>
</body>

通过上面的两个例子对计时器的使用有了简单的了解，但是也发现了一个bug：每次点击按钮触发点击事件时都会开始一个新的定时器，背景图片更换的速度会越来越快。解决方法：为了避免用户多次连续点击造成混乱的情况，每次在点击之后先应该关闭计时器，再开启新的计时器。

接下来介绍延时计时器setTimeout()，用法和计时器基本类似，但顾名思义，延时计时器是在延迟一定的时间后才开始执行函数体内的代码。它与计时器的严格区别如下：

setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数

setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或clearInterval()

类似的，它也有对应的清除方法clearTimeout(timer)

直接进入延时计时器的练习环节：
练习1：打开一个网页1秒后弹出一个广告（随便一个网站截屏做背景），如果在3秒之内点击关闭按钮则消失，否则超过3秒未点击关闭按钮也默认消失。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0;}
#div1{position:fixed;left:50%; width:500px ;margin-left:-250px; top:50%; margin-top:-294px; display:none;}
#btn1{background:#999; cursor:pointer; position:absolute; right:0; top:0;}
</style>
</head>

<body>
    <div id="div1">
        <img src="img/3.png" width="500" height="588" />
        <button id="btn1">X</button>
    </div>
    <script src="myjs/myjs.js"></script>
    <script>
        setTimeout(function fn(){
            getid("div1").style.display='block';
            getid("btn1").onclick=function(){
                getid("div1").style.display='none';
            }
            setTimeout(function fn(){
                getid("div1").style.display='none';
            },3000)
        },1000);
    </script>
</body>

这里写图片描述

练习2：QQ显示详细内容，鼠标移入展示，移出消失，要求鼠标离开过一小段时间再消失（1.5秒），移动到展示内容上时，不消失，从展示上离开后（1.5秒）再消失

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{width:200px; height:400px; background-color:#930; float:left;}
#div2{width:150px; height:200px; background-color:#060; float:left; margin-left:10px; display:none;}
</style>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<script>
var timer = null;
function fn1(){
    clearTimeout(timer);
    $('div2').style.display = 'block';
}
function fn2(){
    timer=setTimeout(function(){
        $('div2').style.display = 'none';
    },500)
}
$('div1').onmouseover = fn1;
$('div1').onmouseout = fn2;
$('div2').onmouseover = fn1;
$('div2').onmouseout = fn2;

function $( v ){
    if( typeof v === 'function' ){
        window.onload = v;
    } else if ( typeof v === 'string' ) {
        return document.getElementById(v);
    } else if ( typeof v === 'object' ) {
        return v;
    }
}
</script>
</body>

练习3：类似于练习2，实现这样的一个效果：鼠标在导航栏上任意指上去时，立即弹出相应的下拉菜单（要求此处切换时不能有延迟）；移出鼠标后下拉框延迟一会再消失；鼠标从导航上移到下拉菜单上时下拉菜单不消失，从下拉菜单上移出时下拉菜单延迟一会再消失；

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" href="css/common.css" rel="stylesheet" />
<style type="text/css">
ul{width:520px; margin:0 auto;}
#ul1 li{float:left;}
#ul1 li a{display:block;padding:0 25px;height:36px; border-left:1px #c6d6e7 solid; border-rightt:1px #c6d6e7 solid; background:url(li.png) repeat-x; line-height:36px;}
#ul1 li a:hover{color:#fff;}
#ul2{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:365px; display:none;}
#ul2 li,#ul3 li,#ul4 li,#ul5 li{height:12px; border-right:1px #7b5ab5 solid; float:left; padding:0 8px;}
#ul3{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:280px; display:none;}
#ul4{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:190px; display:none;}
#ul5{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:105px;  display:none;}
</style>
</head>

<body>
    <ul id="ul1" class="clearfix">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">作品</a></li>
        <li><a href="#">博客</a></li>
    </ul>
    <ul id="ul2" class="clearfix">
        <li><a href="#">JS教程</a></li>
        <li><a href="#">弹出层效果</a></li>
        <li><a href="#">3D球面标签云</a></li>
        <li><a href="#">windows计算器</a></li>
    </ul>
    <ul id="ul3" class="clearfix">
        <li><a href="#">最后的晚餐</a></li>
        <li><a href="#">图书管理系统</a></li>
        <li><a href="#">3D球面标签云</a></li>
        <li><a href="#">淘宝页面</a></li>
    </ul>
    <ul id="ul4" class="clearfix">
        <li><a href="#">我们的历史</a></li>
        <li><a href="#">我们的成绩</a></li>
        <li><a href="#">我们的地址</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
    <ul id="ul5" class="clearfix">
        <li><a href="#">公司简介</a></li>
        <li><a href="#">业务办理</a></li>
        <li><a href="#">价格介绍</a></li>
        <li><a href="#">经典案例</a></li>
    </ul>
    <script>
        var oUl=document.getElementById("ul1");
        var aLi=oUl.getElementsByTagName("li");
        var oUl2=document.getElementById("ul2");
        var oUl3=document.getElementById("ul3");
        var oUl4=document.getElementById("ul4");
        var oUl5=document.getElementById("ul5");
        var timer=null;
        var arr=[oUl5,oUl4,oUl3,oUl2];
        var x;
        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].onmouseover=function(){
                clearTimeout(timer);
                for(var j=0;j<arr.length;j++){
                    if(arr[j].style.display=='block'){
                        arr[j].style.display='none';
                    }
                }
                arr[this.index].style.display="block";
            }   
        }
        /*for(var j=0;j<aLi.length;j++){
            aLi[j].index=j;
            aLi[j].onmouseout=function(){
                x=this.index;
                timer=setTimeout(fn,500)
            }
        }
        function fn(){
            arr[x].style.display='none';    
        };*/
        //写成下面的形式也能运行出来，照上面那样写是为了避免某种情况下的某种冲突，这个某种冲突我之前遇到过，但是现在想不起来了，先放在这吧，等有一天想起来的时候再补充
        for(var j=0;j<aLi.length;j++){
            aLi[j].index=j;
            aLi[j].onmouseout=function(){
                timer=setTimeout(function(){
                    aLi[this.index].style.display='none';
                },500)
            }
        }
        oUl5.onmouseover=function(){
            clearTimeout(timer);
            oUl5.style.display="block";
        }
        oUl5.onmouseout=function(){
            timer=setTimeout(function(){
                oUl5.style.display="none";
            },500)  
        }
        oUl4.onmouseover=function(){
            clearTimeout(timer);
            oUl4.style.display="block";
        }
        oUl4.onmouseout=function(){
            timer=setTimeout(function(){
                oUl4.style.display="none";
            },500)  
        }
        oUl3.onmouseover=function(){
            clearTimeout(timer);
            oUl3.style.display="block";
        }
        oUl3.onmouseout=function(){
            timer=setTimeout(function(){
                oUl3.style.display="none";
            },500)  
        }
        oUl2.onmouseover=function(){
            clearTimeout(timer);
            oUl2.style.display="block";
        }
        oUl2.onmouseout=function(){
            timer=setTimeout(function(){
                oUl2.style.display="none";
            },500)  
        }
    </script>
</body>

pleasecallme_522

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript的计时器简单介绍

首先来介绍计时器setInterval（）的概念和使用方法： 1.setInterval(函数，毫秒)：计时器是一个带有时间概念的东西，表示每间隔多少毫秒的时间执行一次函数体内的代码。类似于循环结构，不过与循环结构仍然存在一些差异：当程序一旦进入循环结构，必须将循环体内的语句执行完毕出循环之后才能执行其他语句。而计时器只需要在到达某时间间隔的时候执行一次函数体内额代码即可，其他时间仍然可以执行其他
复制链接

扫一扫