定时器之setTimeout()

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。

console.log(2);
setTimeout('console.log(6)',1000);
console.log(5);

// 2
// 5
// 6

以上例子中，先输出2和5，然后等待1000毫秒后再输出6。其中console.log(6)需要是字符串的形式来作为setTimeout的参数。

同时可推迟函数，将函数名可直接作为setTimeout的参数。

function tuichi() {
  console.log(6);
}

setTimeout(tuichi, 1000);

即在1000毫秒后执行函数，在外面定义函数。

如果不带数字，即第二个参数省略，则默认为0，如下

setTimeout(tuichi)
// 等同于
setTimeout(tuichi, 0)

由此，对于setTimeout()定时器方法格式，

window.setTimeout(调用函数，[延迟的毫秒数]);

该方法用于设置一个定时器，在该定时器到期后执行调用函数。上面的window在调用时可以省略

当页面中有很多定时器，我们可以给定时器加标识符(名字)

    function callback(){

        console.log(3)

    };

    function fanhui(){

        console.log(5)

    }

    var timer1 = setTimeout(callback,3000);

    var timer2 = setTimeout(fanhui,5000);

以上例子中，3秒后执行函数callback，输出3；5秒后执行函数fanhui，输出5,两个定时器.

除此之外，setTimeout还允许更多的参数。可依次传入推迟执行的函数，即回调函数。

    setTimeout(function (a, b) {
        console.log(a - b);
    }, 1000, 5, 1);
    // 4

可以看到，最终输出的结果为4，即在1000毫秒后，5和1分别作为a和b，作为回调函数的参数，从而执行该回调函数。

普通函数是按照普通代码顺序直接调用，回调函数就是需要等待时间，时间到了之后再去执行，上一件事干完，再回头调用这个函数。

例如，先前的element.onclick = function(){}`和element.addEvenListener("click",fn),其中的函数也是回调函数

小案例

5秒之后，将一个广告隐藏

<img src="images/adv.jpg" alt="" class="adv">

<script type="text/javascript">

    // 先获取

    var adv = document.querySelector(".adv")

    setTimeout(function(){

        adv.style.display = "none"

    },5000);

  
  

</script>

停止setTimeout()定时器

window.clearTimeout(定时器名字ID)