javascript - jQuery 中的可暂停打字机效果

Question

我正在使用 Jason Frame's Grab Bag 中的打字机插件.

但是，我现在发现自己处于一种情况，我需要能够在打字机运行期间随时暂停和恢复它。

理想情况下，我可以使用 .typewriter("pause") 来暂停动画，并使用 .typewriter("resume") 从离开的位置恢复动画关闭。

我尝试在插件中设置一个暂停变量，并让间隔运行并在每次迭代时检查该变量 - 如果为 true，则不执行任何操作。

但是，由于我缺乏制作 jQuery 插件的技巧，每次我调用暂停打字机的函数时，它都会重新开始。我怀疑 paused 变量被重置。

我该如何让这个插件暂停？

Answer 1

jsBin demo

在此处添加这两行:

(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
});

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