jQuery中的可暂停打字机效果

Question

我正在使用来自Jason Frame's Grab Bag 的打字机插件。

但是，我现在发现自己需要能够在这台打字机运行期间的任何时候暂停和恢复它。

理想情况下，我会让.typewriter("pause") 暂停它，并让.typewriter("resume") 从它停止的地方恢复动画。

我尝试在插件中设置paused 变量，并在每次迭代时检查变量的间隔运行——如果为真，则不执行任何操作。

但是，由于我制作jQuery插件的技术欠缺，每次调用该函数暂停打字机，就又重新开始了。我怀疑paused 变量被重置了。

如何让这个插件可以暂停？

Answer 1

jsBin demo

在此处添加这 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
});

编辑：在下面的评论中找到更好的类似插件的解决方案！