js定时器setInterval和setTimeout

js定时器就2个方法，非常简单，直接看代码：

    window.setInterval(function(){        //handle    },1000); // 这里表示每隔1000毫秒执行一次function(){...}方法    window.setTimeout(function(){        //handle    }, 3000); //这里的3000表示3秒后执行function(){...}方法

确切的说setInterval 才是真正的定时执行函数， setTimeout 则是一个延后执行函数。当然，他们都能实现同样的效果，所以通常都称为“定时器”。

注意：定时器的关键在于何时停止，何时该停止，因为定时器会导致内存泄露（爆表）。

---

方法太简单，也没什么好说的，来看几个“小栗子”吧。

setInterval

作为延后执行函数使用，案例一

<div>    <button id="start">run</button>    <button id="btn">stop</button></div><script>    var timer = null;    var start = document.querySelector('#start');    var btn = document.querySelector('#btn');    start.addEventListener('click', function () {        run();    });    btn.addEventListener('click', function () {        stop();    });    function run() {        stop(); //养成良好的习惯，不管这里需要不需要清除定时器，都给我写上。        timer = setInterval(function () {            console.log('5秒后打印出来'); //5秒后执行，但只执行一次            stop(); //注意这里多了一个stop()        }, 5000);    }    function stop() {        if (timer) {            clearInterval(timer);        }    }</script>    

作为定时执行函数使用，案例二

<div>    <button id="start">run</button>    <button id="btn">stop</button></div><script>    var timer = null;    var start = document.querySelector('#start');    var btn = document.querySelector('#btn');    start.addEventListener('click', function () {        run();    });    btn.addEventListener('click', function () {        stop();    });    function run() {        stop(); //记住，这个stop()灰常重要，千万别少，你可以试一试！！！        timer = window.setInterval(function () {            var num = getRandomNumber(100, 500);            console.log(num); //这里每300毫秒产生了一个100-500之间的随机数，你可以用它来干你想干的事情……        }, 300);    }    function stop() {        if (timer) {            window.clearInterval(timer);        }    }    function getRandomNumber(min, max) {        return Math.floor(Math.random() * (max - min) + min);    }</script>

---

setTimeout

作为延后执行函数使用，案例三

<div>    <button id="start">run</button>    <button id="btn">stop</button></div><script>    var timer = null;    var start = document.querySelector('#start');    var btn = document.querySelector('#btn');    start.addEventListener('click', function () {        run();    });    btn.addEventListener('click', function () {        stop();    });    function run() {        stop(); //养成良好的习惯，不管这里需要不需要清除定时器，都给我写上。        timer = setTimeout(function () {            console.log('5秒后打印出来'); //与例一相同，只执行一次        }, 5000);    }    function stop() {        if (timer) {            clearTimeout(timer);        }    }</script>    

作为定时执行函数使用，案例四

<div>    <button id="start">run</button>    <button id="btn">stop</button></div><script>    var timer = null;    var start = document.querySelector('#start');    var btn = document.querySelector('#btn');    start.addEventListener('click', function () {        run();    });    btn.addEventListener('click', function () {        stop();    });    function run() {        stop(); //同样的，这个stop()是保证性能的关键，不能少……        timer = window.setTimeout(function () {            var num = getRandomNumber(100, 500);            console.log(num);//与例二相同，这里每300毫秒产生了一个100-500之间的随机数，你可以用它来干你想干的事情……            run(); //不同的是，这里调用了函数run()        }, 300);    }    function stop() {        if (timer) {            window.clearTimeout(timer);        }    }    function getRandomNumber(min, max) {        return Math.floor(Math.random() * (max - min) + min);    }</script>    

把上面4个例子弄明白了之后，你就可以干活了。至于你要用到什么地方自己看着办。

如果你想把定时器用与轮播图，你可以看看这个例子。点击跳转《封装一个简单的banner轮播插件》

谢谢关注，欢迎点赞：）