如何通过循环过程停止setInterval

Question

我正在编写代码，该代码将弹出包装在数组中的文本，并使用forEach函数显示每个文本。 这是示例代码。

var hotSpots = 
[
    {
        id : 'svc1',                                    // 1
        text: 'Radiator Repair',
        spotPosition: 'left: 0em; top: 14.5em',
        textPosition: 'left: -4em;',
        arrowPosition: 'left: 0.5em;',
    },
    {
        id : 'svc2',                                    // 2
        text: 'Headlight Blub Replacement / Repair',
        spotPosition: 'left: 3em; top: 13em',
        textPosition: 'left: -15em;',
        arrowPosition: 'left: 12em;',
    },
    {
        id : 'svc3',                                    // 3
        text: 'Engine Full Service / Repair',
        spotPosition: 'left: 9em; top: 9.5em',
        textPosition: 'left: -8em;',
        arrowPosition: 'left: 3em;',
    },
    {
        id : 'svc3b',                                   // 8
        text: 'Oil Charge & Lube',
        spotPosition: 'left: 14em; top: 8.5em',
        textPosition: 'left: -6em;',
        arrowPosition: 'left: 3em;',
    },
    {
        id : 'svc4',                                    // 4
        text: 'Wiper / Wiper Motor Repair',
        spotPosition: 'left: 20em; top: 8em',
        textPosition: 'left: -0.5em;',
        arrowPosition: 'right: 12em;',
    },
    {
        id : 'svc5',                                    // 9
        text: 'Windsheild Repair / Replace',
        spotPosition: 'left: 28em; top: 5em',
        textPosition: 'right: -10em;',
        arrowPosition: 'right: 6em;',
    },
    {
        id : 'svc6',                                    // 11                      
        text: 'Window Regulators',
        spotPosition: 'left: 35em; top: 6em',
        textPosition: 'right: -7.8em;',
        arrowPosition: 'right: 6em;',
    },
    {
        id : 'svc7',
        text: 'Drive Axle Service',
        spotPosition: 'right: 3em; top: 6em',
        textPosition: 'right: -7.8em;',
        arrowPosition: 'right: 6em;',
    },
    {
        id : 'svc8',
        text: 'Tune-ups for better Fuel Efficentcy',
        spotPosition: 'right: 11.2em; top: 10.2em',
        textPosition: 'left: -7.5em;',
        arrowPosition: 'left: -1.6em;',
    },
    {
        id : 'svc9',
        text: 'Alignments',
        spotPosition: 'right: 1.7em; top: 13em',
        textPosition: 'left: -2em;',
        arrowPosition: 'left: -1.6em;',
    },
    {
        id : 'svc10',                                   // 13
        text: 'Exhaust Pipe and Mufflers Install / Repair',
        spotPosition: 'right: 3em; top: 20.5em',
        textPosition: 'left: -9em;',
        arrowPosition: 'left: -1.6em;',
    },
    {
        id : 'svc10b',                                 // 10
        text: 'ABS Brakes',
        spotPosition: 'right: 15.8em; top: 19em;',
        textPosition: 'left: -2.2em;',
        arrowPosition: 'left: -1.6em;',
    },
    {
        id : 'svc11',                                  // 
        text: 'Heating Systems',
        spotPosition: 'left: 38em; top: 11em',
        textPosition: 'left: -3.2em;',
        arrowPosition: 'left: -1.6em;',
    },
    {
        id : 'svc12',
        text: 'A/C Service',
        spotPosition: 'left: 12.5em; bottom: 4em',
        textPosition: 'left: -2em;',
        arrowPosition: 'left: -1.6em;',
    },
    {
        id : 'svc13',                                    // 6
        text: 'Tire Repair and Sales',
        spotPosition: 'left: 14em; bottom: 11.4em',
        textPosition: 'left: -4.3em;',
        arrowPosition: 'left: -1.6em;',
    },
    {
        id : 'svc14',                                   // 7
        text: 'Brake Systems',
        spotPosition: 'left: 11.5em; bottom: 7em',
        textPosition: 'left: -3em;',
        arrowPosition: 'left: -1.6em;',
    },
    {
        id : 'svc15',                                    // 5
        text: 'Suspension & Steering',
        spotPosition: 'left: 14em; bottom: 13em',
        textPosition: 'left: -2em;',
        arrowPosition: 'left: -7em;',
    }
];

这是我从var hotSpots中提取数据的方法。

hotSpots.forEach(function(data){

    var element = data.id;

    var popups = setInterval(function(i){

        $('.svchotSpotWrapper').removeClass('show');

        $('#'+element).addClass('show');


    }, 4000 + offset);    

    offset += 4000;

    $(document).on('click', '#'+element, function(){

        $('.svchotSpotWrapper').removeClass('show');

        $(this).addClass('show');

        clearInterval(popups);

    });

});

上面的代码将输出多个点，而我想要实现的是当我单击某个点时，间隔将停止。

以下代码是我已经尝试过的代码：

$(document).on('click', '#'+element, function(){

    $('.svchotSpotWrapper').removeClass('show');

    $(this).addClass('show');

    clearInterval(popups);

});

但是，它不会停止间隔。

Answer 1

您可以在jQuery中传递popups变量作为参数，并在event.data访问单个单击事件：

hotSpots.forEach(function(data) {
  var element = data.id;
  var popups = setInterval(function(i) {
    $('.svchotSpotWrapper').removeClass('show');
    $('#' + element).addClass('show');
  }, 4000 + offset);
  offset += 4000;
  $(document).on('click', '#' + element, { popupInterval: popups }, 
function(event) {
    $('.svchotSpotWrapper').removeClass('show');
    $(this).addClass('show');
    clearInterval(event.data.popupInterval);
  });
});

编辑

为了清除多个时间间隔，您可能已将它们收集在一个数组中并一次清除它们：

var popups = [];
hotSpots.forEach(function(data) {
  var element = data.id;
  var popup = window.setInterval(function(i) {
    $('.svchotSpotWrapper').removeClass('show');
    $('#' + element).addClass('show');
  }, 400 + offset);
  popups.push(popup);
  offset += 400;
  $(document).on('click', '#' + element, function(event) {
    $('.svchotSpotWrapper').removeClass('show');
    $(this).addClass('show');
    popups.forEach(function(popup) {
      clearInterval(popup);
    });
  });
});