【JavaScript】定时器详解

一. 定时器分类

1. 延迟定时器

   setTimeout(function(){}, 毫秒数)
   

   作用：隔一段时间之后执行

2. 间隔定时器

   setInterval(function(){}, 毫秒数)
   

   作用：每隔一段时间执行一次

3. 关闭定时器

   clearTimeout(定时器)
   clearInterval(定时器)
   

   注：虽然关闭定时器的方式有两种，且没什么太大的区别，但是还是建议对应着使用。(如：setInterval ==> clearInterval(定时器))

二. 定时器的使用

1. 延迟定时器

   setTimeout(function () {
       console.log("执行了。。。");
   }, 2000); // 2s 之后，控制台输出：执行了。。。
   

2. 间隔定时器

   setInterval(function () {
       console.log("执行了...");
   }, 2000);
   

3. 关闭定时器

   var t1 = setTimeout(function () {
       console.log("执行了延迟定时器");
   }, 1000);
   clearInterval(t1); // 关闭定时器
   

三. 案例：实现抽奖效果

样式一

HTML代码：

<div id="box">开始抽奖</div>

CSS代码：

div {
    width: 500px;
    height: 100px;
    border: 2px solid #000;
    margin: 100px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
}

JavaScript代码：

// 奖品
var arr = [
    "皮筋一个",
    "辣条一包",
    "谢谢惠顾",
    "包子一个",
    "卡片一张",
    "发夹一个",
    "手机模型",
    "空头支票",
    "皮球一个",
    "果冻一个"
];
// 随机生成 0~arr.length-1 随机数
function randNum(min, max) {
    return Math.round(Math.random() * (max - min)) + min;
}
// 标记思维
var flag = false;
t = null;
// 点击开始
box.onclick = function() {
    if (!flag) {
        // 每个一段时间进行内容切换
        t = setInterval(function() {
            // 调用生成随机数函数
            var num = randNum(0, arr.length - 1);
            // 将生成的随机数当做数组的索引，显示数组的值
            var res = arr[num];
            // 将对应的值显示到页面中
            box.innerHTML = res;
        }, 100);
        flag = true;
    } else {
        clearInterval(t);
        flag = false;
    }
}

效果图：

样式二

HTML代码：

<div id="box">开始抽奖</div>
<button id="btn1">开始</button>
<button id="btn2">停止</button>

CSS代码：

div {
    width: 500px;
    height: 100px;
    border: 2px solid #000;
    margin: 100px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
}

body {
    text-align: center;
}

JavaScript代码：

// 随机生成 0~arr.length-1 随机数
function randNum(min, max) {
    return Math.round(Math.random() * (max - min)) + min;
}
// 奖品
var arr = [
    "皮筋一个",
    "辣条一包",
    "谢谢惠顾",
    "包子一个",
    "卡片一张",
    "发夹一个",
    "手机模型",
    "空头支票",
    "皮球一个",
    "果冻一个"
];
// 随机生成 0~arr.length-1 随机数
function randNum(min, max) {
    return Math.round(Math.random() * (max - min)) + min;
}
t = null;
// 点击开始
btn1.onclick = function() {
    // 防止点击开始重复触发
    if (t) {
        return;
    }
    // 每个一段时间进行内容切换
    t = setInterval(function() {
        // 调用生成随机数函数
        var num = randNum(0, arr.length - 1);
        // 将生成的随机数当做数组的索引，显示数组的值
        var res = arr[num];
        // 将对应的值显示到页面中
        box.innerHTML = res;
    }, 100);

}
btn2.onclick = function() {
    clearInterval(t);
    t = null;
}

效果图：