Question

我正在使用JavaScript并尝试编写一个函数来使颜色闪烁，但问题是当我点击切换闪烁按钮时，当我单击停止切换结束按钮时它不会停止闪烁。我正在尝试实现clearInterval以使其停止但没有运气。任何帮助表示赞赏。

function main() {
  $('.select-color').on('click', function() {
    var selectedColor = $(this).attr('class');

    switch (selectedColor) {
  case 'select-color cyan not-selected':
    colorClass = 'cyan';
    break;
  case 'select-color yellow not-selected':
    colorClass = 'yellow';
    break;
  case 'select-color magenta not-selected':
    colorClass = 'magenta';
    break;
    }
    $(this).removeClass('not-selected');
    $(this).siblings().addClass('not-selected');
  });

  var colorClass = '';


  $('.box').on('click', function() {
        $(this).toggleClass(colorClass);
    });

  $('.toggle-blink').on('click', function() {
    if (colorClass) {
        $('.toggle-blink').toggleClass('opacity');
    }
    setInterval(function() {
          $('.box.cyan, .box.yellow, .box.magenta').toggleClass('blink');      
                }, 500); 
    });

  $('.toggle-blink-end').on('click', function() {
   scope.clearInterval(main);
  });

}

$(document).ready(main);

Answer 1

clearInterval()将intervalID作为参数，而不是函数引用，因此在调用返回给定intervalID的setInterval()时需要存储它：

var intervalID ;

intervalID = setInterval( ... );

clearInterval(intervalID);

Answer 2

要使用master，您需要将clearInterval的结果存储在变量中：

setInterval

试图了解如何在JS中使用clearInterval

2 个答案: