Question

I have the following jQuery extension:

var particleTimer = 0;
jQuery.fn.particleEmitter = function (num, wid, hei, rad, tme, rep) {
   particleTimer = setInterval(function() {
      //appends elements...
   }, 500);
};

jQuery.stopParticleEmitter = function () {
  clearInterval(particleTimer); //this doesn't stop it...
}

But the clearInterval() doesn’t seem to work…

Here is a Fiddle of my complete code: http://jsfiddle.net/neuroflux/wtJFj/3/

Note that the “particles” won’t actually move as it requires the document width…

But the timer should clear onMouseout… and doesn’t…

Answer 1

In terms of the actual setInterval, your code looks fine and I can’t see any reason that it wouldn’t work provided you only hever have one particle emitter running at any given time.

I say that bit about “one at a time” because the first thing that jumped out at me is that you’re assuming no one using your plug-in will ever call your particleEmitter more than once, because you’re using a single variable for the handle.

I’d make maintaining that handle the caller’s responsibility by returning it rather than keeping track of it yourself.

jQuery.fn.particleEmitter = function (num, wid, hei, rad, tme, rep) {
   return setInterval(function() {
      //appends elements...
   }, 500);
};

jQuery.stopParticleEmitter = function(timerHandle) {
  if (timerHandle !== 0) {
      clearInterval(timerHandle);
  }
  return 0;
}

Returning the handle out of the particleEmitter means you can’t chain, but A) Your original didn’t support chaining (barring needing to return anything else, convention is to return this out of plug-in functions, for chaining); and B) One doesn’t always need to support chaining, not if you have a good reason for returning a different value.

Side-note: I returned 0 out of the stopper function above because I tend to use this idiom in my code:

myHandleVar = jQuery.stopParticleEmitter(myHandleVar);

Obviously, that style may not be to your taste. 🙂

Live working example of two emitters with the caller keeping track of the handles:

HTML:

<div id="container1">
  <input type='button' class='start' value='Start 1'>
  <input type='button' class='stop'  value='Stop 1'  disabled>
  <p class="target"></p>
</div>
<div id="container2">
  <input type='button' class='start' value='Start 2'>
  <input type='button' class='stop'  value='Stop 2'  disabled>
  <p class="target"></p>
</div>

JavaScript:

jQuery(function($) {
  var handles = {};

  $("#container1, #container2").each(function() {
    var $this = $(this);
    $this.find(".start").click(startClick);
    $this.find(".stop").click(stopClick);
  });

  function startClick() {
    var container = $(this).closest('div[id^="container"]'),
        id = container[0] && container[0].id;
    if (id) {
      handles[id] = container.find(".target").particleEmitter();
      this.disabled = true;
      container.find(".stop")[0].disabled = false;
    }
      }

  function stopClick() {
    var container = $(this).closest('div[id^="container"]'),
        id = container[0] && container[0].id;
    if (id) {
      handles[id] = $.stopParticleEmitter(handles[id]);
      this.disabled = true;
      container.find(".start")[0].disabled = false;
    }
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

---

Update: You asked below about stopping them all. That’s easily done, just keep track of the handles you hand out (live example):

(function() {
  // Our current set of outstanding handles
  var handles = {};

  // Hook up our emitter function
  jQuery.fn.particleEmitter = function (num, wid, hei, rad, tme, rep) {
    var target = this,
        handle;

    // Start this interval timer
    handle = setInterval(function() {
      $("<span>click </span>").appendTo(target);
    }, 500);

    // Store the handle in a map
    handles[handle] = handle;

    // Return the handle
    return handle;
  };

  // Our "stop" function
  jQuery.stopParticleEmitter = function(timerHandle) {
    if (timerHandle !== 0) {
      // Clear the timer
      clearInterval(timerHandle);

      // Remove the handle from our "outstanding" list
      delete handles[timerHandle];
    }

    // Return a value the caller can use to clear our their
    // handle variable.
    return 0;
  }

  // Our "stop all" function
  jQuery.stopAllParticleEmitters = function() {
    var handle;
    for (handle in handles) {
      if (handles.hasOwnProperty(handle)) { // Largely unnecessary check
        clearInterval(handle);
      }
    }
    // Clear our outstanding handles. There's no race
    // condition here, JavaScript on browsers is single-threaded.
    handles = {};
  };
})();

Note how all of this is wrapped in a function, so the handles variable is private to our plug-in.