eine Funktion nach clearInterval

Question

Ich habe diesen Code:

jQuery(function($) { // DOM is ready 
    var $el = $("header tr"), 
     tot = $el.length, 
     c = 0; 
    var timer = setInterval(function() { 
     $el.removeClass("current").eq(++c % tot).addClass("current"); 
    }, 3000); 
    $el.first().addClass("current"); 
    $el.on({ 
     mouseenter: function(e) { 
      clearInterval(timer); 
     } 
    }); 
    $el.mouseout({ 
     timer; 
    }); 
}); 

Ich möchte die Funktion der Maus darüber auszusetzen und wieder aufzunehmen es auf der Maus, aber ich kann das letztere richtig. Wie kann ich es fortsetzen?

Vielen Dank.

Answer 1

Es gibt zwei Möglichkeiten: „suspended“

1. Setzen Sie einen Flag, das die Funktion durch die Intervallprüfungen genannt zu werden, und hat die Funktion, nichts tun, wenn es

2. Starten Sie das Intervall erneut über einen neuen setInterval Aufruf. Beachten Sie, dass der alte Timer-Wert dafür nicht verwendet werden kann. Sie müssen den Code erneut eingeben.

Beispiel # 1:

jQuery(function($) { // DOM is ready 
    var $el = $("header tr"), 
     tot = $el.length, 
     c = 0, 
     suspend = false;      // The flag 
    var timer = setInterval(function() { 
     if (!suspend) {      // Check it 
      $el.removeClass("current").eq(++c % tot).addClass("current"); 
     } 
    }, 3000); 
    $el.first().addClass("current"); 
    $el.on({ 
     mouseenter: function(e) { 
      suspend = true;     // Set it 
     }, 
     mouseleave: function(e) { 
      suspend = false;     // Clear it 
     } 
    }); 
}); 

Beispiel # 2:

jQuery(function($) { // DOM is ready 
    var $el = $("header tr"), 
     tot = $el.length, 
     c = 0, 
     timer = 0; 

    // Move this to a reusable function 
    var intervalHandler = function() { 
     $el.removeClass("current").eq(++c % tot).addClass("current"); 
    }; 

    // Probably best to encapsulate the logic for starting it rather 
    // than repeating that logic 
    var startInterval = function() { 
     timer = setInterval(intervalHandler, 3000); 
    }; 

    // Initial timer 
    startInterval(); 

    $el.first().addClass("current"); 
    $el.on({ 
     mouseenter: function(e) { 
      clearInterval(timer);    // Stop it 
     } 
     mouseleave: function(e) { 
      startInterval();     // Start it 
     } 
    }); 
}); 

Answer 2

Kasse diese Prototypen:

 //Initializable 
     function Initializable(params) { 
      this.initialize = function(key, def, private) { 
       if (def !== undefined) { 
        (!!private ? params : this)[key] = (params[key] !== undefined) ? params[key] : def; 
       } 
      }; 
     } 

     function PeriodicJobHandler(params) { 
      Initializable.call(this, params); 
      this.initialize("timeout", 1000, true); 
      var getTimeout = function() { 
       return params.timeout; 
      }; 
      var jobs = []; 

      function Job(params) { 
       //expects params.job() function 
       Initializable.call(this, params); 
       this.initialize("timeout", getTimeout(), true); 
       this.initialize("instant", false); 
       var intervalID = undefined; 

       this.start = function() { 
        if (intervalID !== undefined) { 
         return; 
        } 
        if (this.instant) { 
         params.job(true); 
        } 
        intervalID = setInterval(function() { 
         params.job(false); 
        }, params.timeout); 
       }; 

       this.stop = function() { 
        clearInterval(intervalID); 
        intervalID = undefined; 
       }; 
      } 

      this.addJob = function(params) { 
       jobs.push(new Job(params)); 
       return jobs.length - 1; 
      }; 

      this.removeJob = function(index) { 
       jobs[index].stop(); 
       jobs.splice(index, 1); 
      }; 

      this.startJob = function(index) { 
       jobs[index].start(); 
      }; 

      this.stopJob = function(index) { 
       jobs[index].stop(); 
      }; 
     } 

Initializable vereinfacht Mitglied der Initialisierung, während PeriodicJobHandler ist ein können, um Arbeitsplätze in periodischer Form zu verwalten. Jetzt wollen wir es praktisch nutzen:

var pjh = new PeriodicJobHandler({}); 
//It will run once/second. If you want to change the interval time, just define the timeout property in the object passed to addJob 
var jobIndex = pjh.addJob({ 
    instant: true, 
    job: function() { 
     $el.removeClass("current").eq(++c % tot).addClass("current"); 
    } 
}); 
jQuery(function($) { // DOM is ready 
    var $el = $("header tr"), 
     tot = $el.length, 
     c = 0; 
    var timer = setInterval(function() { 
     $el.removeClass("current").eq(++c % tot).addClass("current"); 
    }, 3000); 
    $el.first().addClass("current"); 
    $el.on({ 
     mouseenter: function(e) { 
      jobIndex.stop(); 
     } 
    }); 
    $el.mouseout({ 
     jobIndex.start(); 
    }); 
});