千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip

定时器

一、 setTimeout() 定时器

语法：

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

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

例如：写一个页面，让其五秒钟后弹出‘你好’。

代码如下：

window.setTimeout(function(){

      alert('你好');

    },5000);

需要注意的是：

window 可以省略。

这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。

延迟的毫秒数省略默认是 0，如果写，必须是毫秒。

setTimeout() 这个调用函数我们也称为回调函数callback，普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

二、停止 setTimeout() 定时器

    当我们创建了一个定时器的话，如果我们想要将其取消，应该怎样操作呢？就用到了清除定时器的函数，如下：

window.clearTimeout(timeoutID)

 clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器。

这里面window 可以省略，并且里面的参数就是定时器的标识符 。

    举个例子：

    就上述案列，如果我们想要在指定事件前停止它，可以先添加一个点击按钮，给这个按钮添加清除定时器的事件，操作为：

 var hello = window.setTimeout(function(){

      alert('你好');

    },5000);

    var btn = document.querySelector('button');

    btn.addEventListener('click',function(){

      window.clearTimeout(hello);

    })

三、setInterval() 定时器

    我们再来看看另一种定时器。

window.setInterval(回调函数, [间隔的毫秒数]);

    setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

window 可以省略。

这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。

间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

4.我们经常给定时器赋值一个标识符。

第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。