JavaScript中停止setInterval调用的方法

技术背景

在JavaScript里，setInterval 函数用于按照指定的时间间隔重复执行某个函数或代码块。但在某些场景下，比如满足特定条件、用户操作等，我们需要停止这个重复执行的过程。此时就需要使用合适的方法来停止 setInterval 的调用。

实现步骤

基本方法：使用 clearInterval

setInterval 函数会返回一个唯一的间隔ID，可将其传递给 clearInterval 函数来停止定时器。

var refreshIntervalId = setInterval(fname, 10000);
// 之后
clearInterval(refreshIntervalId);

结合计数器停止

可以设置一个计数器变量，在每次定时器执行时递增该变量，当计数器达到特定值时，使用 clearInterval 停止定时器。

var intervalId = null;
var varCounter = 0;
var varName = function(){
    if(varCounter <= 10) {
        varCounter++;
        // 你的代码
    } else {
        clearInterval(intervalId);
    }
};

$(document).ready(function(){
    intervalId = setInterval(varName, 10000);
});

使用第三方库 TaskTimer

对于需要支持多个任务在不同间隔执行的场景，可以使用 TaskTimer 库。

// 定时器，基础间隔分辨率为1000ms（1秒）
const timer = new TaskTimer(1000);

// 根据滴答间隔添加任务
timer.add({
    id: 'job1',         // 任务的唯一ID
    tickInterval: 5,    // 每5个滴答运行一次（5 x 间隔 = 5000 ms）
    totalRuns: 10,      // 仅运行10次（省略则无限次运行）
    callback(task) {
        // 每次运行时执行的代码
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
        // 随时停止定时器
        if (someCondition()) timer.stop();
        // 或者如果有其他任务，简单地移除这个任务
        if (someCondition()) timer.remove(task.id);
    }
});

// 启动定时器
timer.start();

使用 this 关键字（Node.js）

在Node.js中，可以在 setInterval 函数内部使用 this 关键字来清除定时器。

setInterval(
    function clear() {
        clearInterval(this); 
        return clear;
    }(),
    1000
);

结合DOM元素和条件判断

可以在定时器内部检查DOM元素的状态，当满足特定条件时停止定时器。

const interval = setInterval(function() {
    const checkParticlesjs = document.querySelector('.success_class');  // 从页面获取success_class
    if (checkParticlesjs) {  // 检查success_class是否存在
        fbq('track', 'CompleteRegistration');  // 调用Facebook事件
        clearInterval(interval);  // 停止定时器
    }
}, 2000); // 每2秒重复一次

通过按钮控制

可以使用按钮的点击事件来启动和停止定时器。

<button onClick="inter = setInterval(myCounter, 1000)">start to count</button>
<p id="demo">here is the counter</p>
<button onClick="clearInterval(inter)">stop</button>

添加类名控制

可以通过添加或移除类名来控制定时器的执行。

var i = 0;
this.setInterval(function() {
    if(!$('#counter').hasClass('pauseInterval')) { // 仅在没有'pauseInterval'类时运行
        console.log('Counting...');
        $('#counter').html(i++); // 仅用于解释和显示
    } else {
        console.log('Stopped counting');
    }
}, 500);

$('#counter').hover(function() { // 鼠标进入
    $(this).addClass('pauseInterval');
}, function() { // 鼠标离开
    $(this).removeClass('pauseInterval');
});

$('#pauseInterval').click(function() {
    $('#counter').toggleClass('pauseInterval');
});

核心代码

基本的 setInterval 和 clearInterval 使用

const intervalID = setInterval(f, 1000);
// 一些代码
clearInterval(intervalID);

最佳实践

• 始终将 setInterval 的返回值存储在一个变量中，以便后续可以方便地停止定时器。
• 在复杂场景下，使用计数器或条件判断来灵活控制定时器的停止。
• 对于需要支持多个任务的情况，考虑使用第三方库，如 TaskTimer。

常见问题

忘记存储间隔ID

如果没有将 setInterval 的返回值存储在变量中，就无法使用 clearInterval 停止定时器。因此，一定要记得存储间隔ID。

错误的ID传递

传递给 clearInterval 的ID必须是 setInterval 返回的有效ID，否则定时器不会停止。

内存泄漏

如果定时器没有正确停止，可能会导致内存泄漏。确保在不需要定时器时及时停止它。