16 JavaScript 定时器

在js中有两种定时器：

• 一次性定时器：setTimeout()

• 周期性循环定时器: setInterval()

两种方法根据不同的场景和业务需求择而取之，

对于这两个方法，需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout

1 setTimeout()

只在指定的时间后执行一次

//定时器 异步运行  
function hello(){  
alert("hello");  
}  

var t1 = window.setTimeout(hello,1000);  //使用方法名字执行方法  
var t2 = window.setTimeout("hello()",3000); //使用字符串执行方法  
window.clearTimeout(t1); //清楚定时器

2 setInterval()

在指定时间为周期循环执行

var num = 0;
var timer = null;
function hello(){
    num++;
    if (num>5){
        clearInterval(timer); //清楚定时器
        return; //结束执行
    }
    console.log('num:'+num);
}
var timer = setInterval(hello,1000); //当执行时会停1秒在执行

clearInterval(timer); //清楚定时器

//实际应用：
//每次使用定时器，结束时一定要记得关闭！
let time = 60;
let remind = setInterval(function () {
    $smsBtn.val(time + "秒重新发送");
    time -= 1;
    if (time < 0) {
       clearInterval(remind);  // 关闭定时器
        $smsBtn.val("点击获取验证码");
        $smsBtn.prop('disabled', false);
        }
    }, 1000);

3 应用

<input type="text" id="box"> <button onclick="start()">start</button> <button onclick="end()">end</button>
<script>
    function show_start() {
        var now = new Date();
        var now_str = now.toLocaleString();
        var ele = document.getElementById('box');
        ele.value = now_str;
    }
    var ID;
    function start() {
        if (ID === undefined);{
            show_start();
            ID = setInterval(show_start,1000);
        }
    }
    function end() {
        clearInterval(ID);
        ID = undefined;
    }
</script>