Question

I’m using the typewriter plugin from Jason Frame’s Grab Bag.

However, I now find myself in a situation where I need to be able to pause and resume this typewriter at any point during its run.

Ideally, I’d have .typewriter("pause") to pause it, and .typewriter("resume") to resume the animation from where it left off.

I’ve tried setting a paused variable within the plugin, and leaving the interval running with a check for the variable each iteration — if true, do nothing.

However, due to my lack of skills in making jQuery plug-ins, each time I call the function to pause the typewriter, it just starts all over again. I suspect the paused variable gets reset.

How would I go about making this plugin pausable?

Answer 1

jsBin demo

Add this 2 lines here:

(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

and I created this:

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

EDIT: find a better plugin-like solution in the comment below!