22、定时器

好好学习_fighting

于 2022-10-13 07:03:11 发布

阅读量167

点赞数 1

分类专栏： js基础文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/qq_40637729/article/details/127293929

版权

js基础专栏收录该内容

26 篇文章 2 订阅

订阅专栏

定时器

文章目录

定时器

setInterval();

定时循环器。setInterval是window上的方法，所以不用定义，程序自己会去GO中找。

setInterval()演示

var time = 1000;   
var i = 0;
setInterval(function () {
    i ++;
    console.log(i);
},time ); // 每隔1000毫秒执行一次
time = 2000;  // 再给time赋值没用,只取第一次赋值的值

setInterval()的时间不精准

注意： setInterval的时间是很不精准的。

var time = 1000;   
var firstTime = new Date().getTime();
setInterval(function () {
	var lastTime = new Date().getTime();
    console.log(lastTime - firstTime);
    firstTime = lastTime; // 以便于下次再减(第二轮的开始时间就是第一轮的结束时间)
},time );

每一个setInterval()都有唯一标识

var timer =  setInterval(function() {},1000);
var timer2 =  setInterval(function() {},1000);
var timer3 =  setInterval(function() {},1000);

setTimeout();

真正的定时器，意思是延迟多长时间之后再执行程序,并且只执行一次。

 setTimeout(function() {
     console.log('张杰很帅');
 },1000);

clearInterval();

每一个setInterval()都有唯一标识

var timer =  setInterval(function() {},1000);
var timer2 =  setInterval(function() {},1000);
var timer3 =  setInterval(function() {},1000);

按照唯一标识可以清除setInterval

var time = 1000;   
var i = 0;
var time = setInterval(function () {
    i ++;
    console.log(i); // 打印停不下来
    if(i > 3) {
        clearInterval(time);  // 给我停
    }
},time );

打印到4是因为i++是先用后变，所以if判断的时候是3，打印的时候++了所以是

clearTimeout();

清除定时任务

每一个setTimeout()都有唯一标识

var timer =   setTimeout(function() {},1000);
var timer2 =  setTimeout(function() {},1000);
var timer3 =  setTimeout(function() {},1000);

按照唯一标识可以清除setTimeout

 var timer = setTimeout(function() {
     console.log('张杰很帅');
 },1000);
 clearTimeout(timer); // 清除定时任务

全局对象window上的方法,内部函数this指向window

setInterval()和setTimeout()的function的this都指向window,因为setInterval()和setTimeout()都是window上的方法

注意: setInterval(“fun.c()”,1000);

另一种展现形式(基本不用)

// 间隔1000毫秒执行引号中的代码。
var timer = setInterval("console.log('杰');",1000);
 clearInterval(timer);

练习题

计时器，到三分钟停止！

<style>
        input {
            width: 100px;
            border: 1px solid rgba(0, 0, 0, 0.8);
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }

        label {
            font-size: 20px;
            font-weight: bold;
        }
    </style>

<body>
        <span>
            <label>minutes:</label>
            <input type="text" value="0">
        </span>
        <span>
            <label>seconds:</label>
            <input type="text" value="0">
        </span>
    <script type="text/javascript">
        var minutesNode = document.getElementsByTagName('input')[0];
        var secondsNode = document.getElementsByTagName('input')[1];
        var minutes = 0;
        var seconds = 0;
        var timer = setInterval(function() {
            seconds ++;
            if(seconds == 60) {
                seconds = 0;
                minutes ++;
            }
            secondsNode.value = seconds;
            minutesNode.value = minutes;
            if(minutes == 3) {
                clearInterval(timer);
            }
        },1000)
    </script>
</body>
ds;
            minutesNode.value = minutes;
            if(minutes == 3) {
                clearInterval(timer);
            }
        },1000)
    </script>
</body>