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轮播插件》

谢谢关注，欢迎点赞：）