Löschen Timeouts im Array, wenn sie existieren

Question

Für das Leben von mir kann ich nicht herausfinden, wie Timeouts in einem Array gelöscht werden, wenn sie existieren.

Ich habe eine einzelne Seite App (SPA) Website (http://www.rock3t.ca/) und die IDs wachsen jedes Mal, wenn Sie auf "Home" sehr schnell klicken, die die Timeouts nicht abzubrechen scheint. Besuchen Sie die Website und Sie werden den Slogan unter dem Logo im Zentrum sehen, der sich sehr schnell ändert und dann langsamer wird. Klicken Sie mehrmals auf "Home", um zu sehen, wie es reagiert. Es hat sich nicht geklärt, Sie werden Blips bemerken.

//slogans 
function loadSlogans(){ 

    //slogan timeouts 
    var sloganTimeouts = []; 

    //slogans 
    var slogans = ['Websites', 'Apps', 'Media', 'Code', 'SEO', 'CRM','Ads','Flyers','Logos','Games','Streams','Web','Websites', 'Apps', 'Media', 'Code', 'SEO', 'CRM','Ads','Flyers','Logos','Games','Streams','Web']; 

    var sloganTime = 100; 
    var sloganTimeFade = 0; 
    var slogans_length = slogans.length; 
    var sloganHalfTime = slogans_length/2; 

    //clear slogan timeouts 
    $(slogans).each(function(i){ 

     //clear timeout if exists 
     if(typeof sloganTimeouts[i] !== "undefined"){ 
      clearTimeout(sloganTimeouts[i]); 
     } 
    }); 

    //slogan timeout 
    function runSloganTimeout(i) { 

     //easing out time when half way 
     if(i > sloganHalfTime){ 
      sloganTimeFade++; 
      sloganTime = (i * 100) + (sloganTimeFade * 100) * (sloganTimeFade/4); 
     }else{ 
      sloganTime = i * 100; 
     } 

     //set timeouts 
     sloganTimeouts[i] = setTimeout(function(){ 

      //append slogans 
      $('#slogan span').html(slogans[i]); 

     },sloganTime); 
    } 

    //each slogan 
    $(slogans).each(function(i){ 

     //run 
     runSloganTimeout(i); 
    }); 
} 

Dank

Answer 1

Es wird gelöscht, aber vorheriger Prozess hat noch nicht vorbei, so dass Sie alle in Kürze Timeouts nicht klar. Eine der Lösungen: Fügen Sie ProcessId Global Var hinzu und unterbrechen Sie den vorherigen Prozess. mein Beispiel Siehe: Plunker

var processId = 0; 

//slogans 
function loadSlogans(){ 

    processId++; 

    var selfProcessId = processId; 

    //slogan timeouts 
    ... 
    //slogans 
    ... 
    //clear slogan timeouts 
    ... 

    //slogan timeout 
    function runSloganTimeout(i) { 
     //easing out time when half way 
     ... 
     //set timeouts 
     sloganTimeouts[i] = setTimeout(function(){ 
      //append slogans 
      if(selfProcessId == processId) 
       $('#slogan span').html(i+slogans[i]); 

     },sloganTime); 
    } 

    //each slogan 
    $(slogans).each(function(i){ 

     //run 
     if(selfProcessId == processId) 
      runSloganTimeout(i); 
    }); 
}