views:

110

answers:

0

I am writing a small jQuery plugin to update a set of Divs with content obtained using Ajax calls. Initially, let's assume we have 4 divs. I am doing something like this:

(function($) {
    ....
    ....

    //main function
    $.fn.jDIV = {
       init: function() {
          ...
          ...
          for(var i = 0; i < numDivs; i++) {
             this.query(i);
          }
          this.handlers();
       },

       query: function(divNum) {
          //Makes the relevant ajax call
       },

       handlers: function() {
          for(var i = 0; i < numDivs; i++) {
            setInterval("$.fn.jDIV.query(" + i + ")", 5000);
          }
       }
    };

})(jQuery);

I would like to be able to enable and disable a particular ajax query. I was thinking of adding a "start" and "stop" instead of the "handlers" function and subsequently storing the setInterval handler like this:

start: function(divNum) {
    divs[divNum] = setInterval("$.fn.jDIV.query(" + divNum + ")", 5000);
},
stop: function(divNum) {
    clearInterval(divs[divNum]);
}

I did not use jQuery to setup and destroy the event handlers. Is there a better approach (perhaps using more of jQuery) to achieve this?