(共556篇)
全部分类

设置和取消定时器
[ JS基础 ] 

设置和取消定时器

浏览器提供了两种定时器函数,也就是说在指定的时间后,执行某一个函数。

setInterval()

window.setTinterval(fn, delayTime)用于设置一个能够执行多次的定时器,第一个参数必须是一个函数,表示想要重复调用的函数,第二个参数用于设置下次执行函数的延迟时间,单位是“毫秒”。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<style>
    body {
        height: 150%;
        width: 150%;
    }
</style>
<script>
    // 每隔1秒钟,让水平和垂直方向的滚动条位置加10
    window.setInterval(function() {
        window.scrollBy(10, 10);
    }, 1000);
</script>

案例源码

setTimeout()

window.setTimeout(fn, delayTime)用于设置一个只会执行一次的定时器,参数和setInterval()相同。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<style>
    body {
        height: 150%;
        width: 150%;
    }
</style>
<script>
    // 1秒钟后,让水平和垂直方向的滚动条位置加10
    window.setTimeout(function() {
        window.scrollBy(10, 10);
    }, 1000);
</script>

案例源码

clearInterval()和 clearTimeout()

window.clearInterval(intervalRefrence)用于清除setInterval()设置的定时器,window.clearTimeout(timeoutRefrence)则用来清除setTimeout()设置的定时器。

先来看一个清除重复定时器的案例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<style>
    body {
        height: 150%;
        width: 150%;
    }
</style>
<script>
    // 每隔1秒钟,让水平和垂直方向的滚动条位置加10
    var timer = window.setInterval(function() {
        window.scrollBy(10, 10);
    }, 1000);

    // 3.5秒后,取消定时器timer
    window.setTimeout(function() {
        window.clearInterval(timer);
    }, 3500);
</script>

案例源码

这个案例中,setInterval中的函数执行 3 次后,就不在执行了,因为这个定时器被取消了。

再来看一个清除一次性定时器的案例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<style>
    body {
        height: 150%;
        width: 150%;
    }
</style>
<script>
    function scrollFn() {
        window.scrollBy(10, 10);
    }
    // 5秒钟后,让水平和垂直方向的滚动条位置加10
    var timer = window.setTimeout(scrollFn, 5000);

    // 3秒后,取消定时器timer
    window.setTimeout(function() {
        window.clearInterval(timer);
    }, 3000);
</script>

这个案例中函数scrollFn不会被执行,因为 3 秒后该定时器就被取消了。