Question

我已经制作了一个定时功能，在页面加载之前延迟9秒，然后再开始。但是，如果用户与正在影响的div进行交互，我希望它被取消。这是我调用函数的代码。

function buttonchange4(){
  $(".button4").css("backgroundColor","yellow").delay(3000).queue(function(next4){
  $(".button4").css("backgroundColor","silver");
     next4();
  });
};

var buttonshow3;
  $(document).ready(function(){
  $(".button4").delay(9200).queue(function(nextoooo){
      buttonchange4();
      buttonshow3 = setInterval( buttonchange4, 12000);
      nextoooo();
  });
});

这是我停止功能的代码。

$('.button4').click(function(){
   $( ".button4" ).stop();
   clearInterval(buttonshow3);
   $('.button4').css("backgroundColor","yellow");
});

出于某种原因，在3秒的延迟之后它仍然将按钮的背景颜色改为银色......似乎停止延迟功能并直接跳到buttonchange4();如何阻止它？ / p>

Answer 1

return;会中断并停止该功能

如果要打破TimeInterval，可以这样做：

var i = setInterval(FunctionA, 1000);
clearInterval( i );

或者您可以使用delay()停止dequeue();：

$( ".button4" ).dequeue();

Answer 2

jQuery的延迟功能没有提供取消它的方法（docs）。

所以我建议使用setTimeout和clearTimeout，如下所示：

var timeoutId = setTimeout(function() {
    // do something
}, 9000)
function cancel() {
    clearTimeout(timeoutId)
}

如何提前停止功能？

2 个答案: