如何暂停.delay(）方法

How can I pause the .delay() method?

本文关键字：delay 方法 何暂停 暂停      更新时间：2023-09-26

我正在尝试为延迟函数创建切换效果

点击功能：

$('#swap').on('click', function(e){
//code bellow $('#swap').delay(1000).attr('src') == 'Play.png'
  if ($(this).attr('src') == 'Play.png') {
$('#swap').attr('src') == 'Pause.png'
}
else{
$('#swap').attr('src') == 'Play.png'
}

点击后，另一个功能开始延迟：

$('#swap').delay(1000).attr('src') == 'Play.png'

之后，如果您再次单击#swap，则延迟将暂停（不停止），如果再次单击，则延迟将继续。这可能吗？

因为目前，如果点击，延迟会从头开始吗？

.delay（）

设置计时器以延迟队列中后续项目的执行。

（例如：fadeIn（）、fadeOut（）、.slideUp（）、slideDown（）等动画…）

文档：http://api.jquery.com/delay/

在您的情况下，尝试使用：

setTimeout(function(){
 // Do something
},1000);

如果我理解，你是说这样的事情

var clicked;
$('#swap').on('click', function(e) {
    if(!clicked) {
        setTimeout(function(){
          $(this).attr('src','Play.png');
        },1000);
        clicked = true;
    } else {
         $(this).attr('src','Pause.png');
        clicked = false;
    }
});

或者使用切换事件

$('#swap').toggle(function() {
  setTimeout(function(){
    $(this).attr('src','Play.png');
  },1000);
},function() {
    $(this).attr('src','Pause.png');
});

文档：http://api.jquery.com/toggle-event/

更新：

$('#swap').on('click',function() {
    var $this = $(this);
    var src = $this.attr('src');
    if (src == 'Play.png') {
        setTimeout(function(){
           $this.attr('src','Pause.png');
        },1000);
    } else {
        $this.attr('src','Play.png');
    }
});

使用clearTimeout（）更新：

var swapTimer;
$('#swap').on('click', function () {
    var $this = $(this);
    var src = $this.attr('src');
    if (src == 'Play.png') {
        swapTimer = setTimeout(function () {
            $this.attr('src', 'Pause.png');
        }, 1000);
    } else {
        clearTimeout(swapTimer);
        $this.attr('src', 'Play.png');
    }
});

演示：http://jsfiddle.net/qnDh8/（播放.png=红色，暂停.png=黄色）

相关文章：