OnClick的暫停動畫

Question

我有以下代碼，通過具有data-slides屬性的頁面上的每個div指定要顯示的圖像。它通過淡入和淡出他們的動畫在一個循環中不同的圖像：

(function($) { 
'use strict'; 
$('[data-slides]').each(function(){ 
     var $slides = $(this); 
     var images = $slides.data('slides'); 
     var count = images.length; 
     var number = 0; 
     var slideshow = function() { 
      $slides 
       .css('background-image', 'url("' + images[number%count] + '")') 
       .show(0, function() { 
        setTimeout(slideshow, 3500); 
       }); 
       number++; 
     }; 

     slideshow(); 
    }); 
}(jQuery)); 

我想要做的是有再次啓動的幻燈片動畫按鈕暫停正在製作動畫的特定元素，然後另一個按鈕。我怎樣才能做到這一點？謝謝！

編輯

使用從Flash雷霆的建議，我已經有獨立的定時器，可暫停更新它：

function Timer(callback, delay) { 
    var timerId, start, remaining = delay; 

    this.pause = function() { 
     window.clearTimeout(timerId); 
     remaining -= new Date() - start; 
    }; 

    this.resume = function() { 
     start = new Date(); 
     window.clearTimeout(timerId); 
     timerId = window.setTimeout(callback, remaining); 
    }; 

    this.resume(); 
} 

function runSlideshow(div){ 
    var $slides = div; 
    var images = $slides.data('slides'); 
    var count = images.length; 
    var number = 0; 
    this.slideshow = function() { 
     $slides 
      .css('background-image', 'url("' + images[number%count] + '")') 
      .show(0, function() { 
       timer.resume(); 
      }); 
      number++; 
    }; 
    var timer = new Timer(this.slideshow, 3500); 

    this.slideshow(); 
} 

(function($) { 
    'use strict'; 
    $('[data-slides]').each(function() { 
      var run = new runSlideshow($(this)); 
      run.slideshow(); 
    }); 
}(jQuery)); 

這工作，但我需要能夠從$('[data-slides]')的任何一個訪問定時器以便能夠暫停它。我怎麼能夠？

Answer 1

function Timer(callback, delay) { 
    var timerId, start, remaining = delay; 

    this.pause = function() { 
     window.clearTimeout(timerId); 
     remaining -= new Date() - start; 
    }; 

    this.resume = function() { 
     start = new Date(); 
     window.clearTimeout(timerId); 
     timerId = window.setTimeout(callback, remaining); 
    }; 

    this.resume(); 
} 

var timer = new Timer(function() { 
    alert("Done!"); 
}, 1000); 

timer.pause(); 
// Do some stuff... 
timer.resume(); 

致謝Tim Down。