JavaScript 定时器

定时器:

  • setlnterval();
  • setTimeout();
  • clearlnterval();
  • clearTimeout();
    这四个函数都是全局对象window上的方法,内部函数this指向window

1.setlnterval();定时循环
每隔多长时间(千毫秒)执行一次函数
属性示例:

<script type="text/javascript">
    setInterval(function() {
        console.log('a');
    },1000);        //表示每隔一千毫秒执行一次(一秒)
</script>

下面给出这种赋值的形式,会按照每两秒一次执行吗?

<script type="text/javascript">
    var time = 1000;
    setInterval(function() {
        console.log('a');
    },time);  
    time = 2000</script>

是不可行的,因为:执行到time会取一次值,每隔time个时间执行一次这个函数,会多次执行这个函数,但识别这个time只识别一次,所以当初写的多少,它就会认为是多少,后面再改是没有用的,所以会始终按照1秒来执行。

缺点解析:

<script type="text/javascript">
    var firstTime = new Date().getTime();
    setInterval(function) {
        var lastTame = new Date().getTime();
        console.log(lastTime - firstTime);
        firstTime = lastTime;
    },1000);
</script>
//是非常不准的,误差很大

结论:setInterval是非常不准的,这里内部原理非常复杂,不用非得理解,知道误差极大即可。

特性:
1.setInterval是widow上的方法,所以它执行时作用域会上GO里面找
2.每个setInterval都会返回一个特定的数字作为唯一标识。

<script type="text/javascript">
    var timer = setInterval(function(){
    },1000);
    var time2 = setInterval(function(){},2000);
</script>

这里写图片描述
这里我们可以看到在控制台输入timer会返回1,输入timer2会返回2,返回的数字是特定且不相同的。

思考:根据setInterval的定义(每隔多长时间(千毫秒)执行一次参数函数),这个函数的执行是没有终点的,那如果我们想让它在特定的位置停止,该用什么来实现?
这里用clearlnterval();来清除,清除时需要选中,这时我们就可以用特性二(返回特定数字)来进行选中了。

示例:

<script type="text/javascript">
    var i = 0;
    var timer = setInterval(function(){
        console.log(i++);
        if(i>10){
            clearInterval(timer);
        }
    },10);
</script>
// 1 2 3 4 5 6 7 8 9 10

这也是清除定时器的方法。

2.setTimeout();推迟定时执行
推迟到一定的时间之后,再执行这个函数
应用:定时闹钟
类比的:setTimeout();也会返回一个特定的数字作为唯一标识,也需要用clearTimeout()来清除,使用方法和除了作用与setlnterval();不同之外,其余均可以类比使用。

setlnterval和setTimeout都可以这样使用:(”func()”,1000)
比如说:

setlnterval("console.log('a');",1000);

练习题:
计时器,到三分钟停止。

<html>
<head>
    <meta charset="UTF-8">
    <title>Date</title>
    <style type="text/css">
        input{
            border: 1px solid rgba(0,0,0,0.8);
            text-align:right;
            font-size:20px;
            font-weight:bold;
       }
     </style>
</head>
<body>
    minutes:<input type="text" value="0">
    seconds:<input type="text" value="0">
</body>
<script type="text/javascript">
    var minutesNode = document.getElementsByTagName('input')[0];
    var secondsNode = document.getElementsByTagName('input')[1];
    var minutes = 0,
        seconds = 0;        //再重新取两个变量用来计数
    setInterval(function(){
        seconds ++;
        if(seconds == 60) {
            seconds = 0;
            minutes ++;
        }
        secondsNode.value = seconds;
        minutesNode.value = minutes;
        if(minutes == 3){
            clearInterval(timer);   //计数到三分钟的时候停止
        }
    },10)
</script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值