JS中2种定时器的使用及清除的实现

JS中有两种定时器，分别是setInterval()和setTimeout()，这两种定时器都有其特殊的用处。下面我将为你详细讲解这两种定时器的使用方法和如何清除定时器。

setInterval()定时器

setInterval() 根据指定的周期（以毫秒为单位）来调度一个函数，函数会按照指定的周期被周期性地执行。setInterval函数接受两个参数——第一个参数是要周期执行的 function，第二个参数是周期的时间长度（毫秒为单位）。setInterval() 函数会一直周期性地运行，直到 clearInterval() 函数被调用或被关闭窗口或页面。下面是一个示例，每1000毫秒输出一次 "Hello World!"：

setInterval(function() {
    console.log('Hello World!');
}, 1000);

setTimeout()定时器

setTimeout() 是另一种定时器类型，它会在一定时间间隔之后执行指定的函数。setTimeout() 调用一次函数或一次执行一个指定的代码片段，而 setInterval() 则按固定时间间隔重复调用函数或执行代码片段。

setTimeout() 函数也接受两个参数——第一个是要执行的 function 或要执行的代码片段，第二个是延迟的时间长度，以毫秒为单位。下面是一个示例，每1000毫秒输出一次 "Hello World!"，但只输出一次。

setTimeout(function() {
    console.log('Hello World!');
}, 1000);

清除定时器

如果需要清除已经设定的周期任务或单次任务（定时器），就需要使用 clearInterval() 函数来实现。而清除 setTimeout() 的方法是使用 clearTimeout() 函数。下面是一个使用 setInterval() 周期任务并使用 clearInterval() 函数来清除的例子：

let i = 0;
let timer = setInterval(function() {
    i++;
    console.log(i);
    if (i === 10) {
        clearInterval(timer);
    }
}, 1000);

以上代码会周期性地输出 1 至 10 的数字，当 i 的值达到 10 时，会清除定时器。

下面是一个使用 setTimeout() 单次任务并使用 clearTimeout() 函数来清除的例子：

let timer = setTimeout(function() {
    console.log('Hello World!');
}, 1000);

clearTimeout(timer); // 这将清除定时器

以上代码只会输出一次 "Hello World!"，但因为 clearTimeout() 函数会取消掉该定时器，因此不会有任何输出。

以上就是定时器的使用及清除的实现的完整攻略。