如何暂停.delay（）方法？

Question

我正在尝试为延迟功能创建一个切换效果

点击功能：

$('#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，延迟暂停 （不停止），如果再次点击，则延迟会继续。这可能吗？

因为目前延迟只会在点击时从头开始？

Answer 1

<强>

的 .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/（Play.png =红色，Pause.png =黄色）