javascript之定时器的学习

定时器有两种:
第一种: 只会执行一次, 指定时间之后,执行某一个操作.
第二种: 周期性执行,间隔多少时间之后,周期性执行某一个操作.
setTimeout(fn,time)函数，返回timer，用于指定一段时间后执行某函数
setInterval(fn,time)函数，返回timer，用于周期性执行某函数;
参数fn可以是字符串组成的jascript代码，也可以是一个函数名称；
参数time表示时间，毫秒为单位；
clearTimeout(timer)函数，清除由setTimeout创建的定时器；
clearInterval(timer)函数，清除由setInterval指定的定时器；
示例:做一个最简单的倒计时跳转的定时器

var interval=setInterval(function () {
    //根据id获取到对应的标签
    var timeEle=document.getElementById("time");
    //得到标签的文本内容
    var time = timeEle.innerHTML;
    timeEle.innerHTML=--time;
    if(time==0){
        window.location.href="https://www.baidu.com";
    }
},1000);
//停止计时器
function stop() {
    clearInterval(interval);
}
//继续
function continueRun() {
    interval=setInterval(function () {
        //根据id获取到对应的标签
        var timeEle=document.getElementById("time");
        //得到标签的文本内容
        var time = timeEle.innerHTML;
        timeEle.innerHTML=--time;
        if(time==0){
            window.location.href="https://www.baidu.com";
        }
    },1000);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <span id="time">10</span>秒之后跳转到指定页面
    <button onclick="stop();">暂停</button>
    <button onclick="continueRun();">继续</button>
</body>
</html>

范亚明

发布了52 篇原创文章 · 获赞 2 · 访问量 238

私信关注

javascript之定时器的学习

猜你喜欢