定时器

延时定时器

延时定时器的参数

延时定时器：定义一个方法，指定方法在多久后执行 只执行一次

// setTimeout(handler, timeout, ...arguments);
// handler:回调函数
// timeout：多久之后执行回调函数
// ...arguments:传入回调函数的参数列表
var clock = setTimeout(function(i) {
    console.log(i);
}, 1000, i)

//终止定时器，定时器必须有变量名作为定时器的名称
 clearTimeout(clock);

循环定时器

循环定时器的参数

// setInterval(handler, timeout, ...arguments);
// handler:回调函数
// timeout：多久循环执行一次回调函数
// ...arguments:传入回调函数的参数列表
var clock = setInterval(function(i) {
    console.log(i);
}, 1000, i)

//终止定时器，定时器必须有变量名作为定时器的名称
 clearInterval(clock);

定时器的练习（打印1-10）

• 方法1：

// 利用递归的方式
function print(i) {
    console.log(`${i}  ${new Date()}`);
    // 如果打印不到10，就一直执行延时定时器打印
    if (i < 10) {
        //++i,先加一再执行
        setTimeout(print, 1000, ++i)
    }
}

print(1)

• 方法2

for (var i = 1; i < 11; i++) {
    // 每循环一次，就执行一次定时器
    var clock = setTimeout(function (i) {
        console.log(`${i}  ${new Date()}`);
        // 每次循环一次，时间就增加1S
    }, 1000 * i, i)
}

• 方法3：

// 利用循环定时器实现隔秒打印1-10之间的数字 
// 每隔1s循环一次，然后自增1，到10时，结束定时器
var a = 1;
var b = setInterval(function () {
    console.log(a);
    a++;
    if (a > 10) {
        clearInterval(b);
    }
}, 1000)