如何用循环过程停止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);
    });
  });
});

如何用循环过程停止setInterval

How to stop setInterval with loop process

javascript

jquery

setinterval

clearinterval