jQuery中的可暫停打字機效果

Question

我正在使用Jason Frame的Grab Bag中的打字機插件。

但是，我現在發現自己處於這樣一種情況，我需要能夠在運行過程中的任何時候暫停並恢復該打字機。

理想情況下，我需要.typewriter("pause")暫停它，並使用.typewriter("resume")從停止的地方恢復動畫。

我嘗試在插件中設置一個paused變量，並在每次迭代時都對變量進行檢查以保持間隔運行-如果為true，則不執行任何操作。

但是，由於我缺乏制作jQuery插件的技能，所以每次我調用該函數來暫停打字機時，它都會重新開始。 我懷疑paused變量會重置。

我將如何使該插件可暫停？

Answer 1

jsBin演示

在此處添加這2行：

(function($) {      
    $.fn.typewriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0;
            $ele.text('');
            timer = setInterval(function() {
              if(pause===false){    // ADD THIS LINE ////////////////////////
                  $ele.text(str.substring(0, progress++) + (progress & 1 ? '_' : ''));
                  if (progress >= str.length) clearInterval(timer);
              }                     // ADD THIS LINE ////////////////////////
            }, 100);
        });
        return this;
    };   
})(jQuery);

$("#typewriter").typewriter(); // run your plugin

我創建了這個：

var pause = false;
$('#play_pause').click(function(){
  pause= !pause ? true : false;    // toggle true/false pause states
});

編輯：在下面的評論中找到更好的類似於插件的解決方案！