Wie verwende ich cleartimeout, um eine rekursive settimeout-Funktion in .getJSON zu stoppen?

Question

Dies ist der JavaScript-Code für eine einfache Website, die einen Suchbegriff verwendet und einige Bilder dieses Suchbegriffs aus den letzten Flickr-Uploads scrollt.

Wenn der Benutzer die Taste drückt, beginnt er durch die Flickr-Bilder zu blättern. Wenn er jedoch eine weitere Bildersuche eingibt und die Taste erneut drückt, sollte das aktuelle Bildscrollen aufhören und durch die Bilder der neuen Suche scrollen Begriff.

Das Problem ist, dass das ursprüngliche Scrollen nicht aufhört, sondern nur die beiden überlappt.

var main = function() { 
    var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags="; 
    var end = "&format=json&jsoncallback=?"; 
    var input = document.querySelector("body input"); 
    var button = document.querySelector("body button"); 
    var images = document.querySelector("body .images"); 

    var buttonPressed = false; 

    //This is supposed to be the id of the current settimeout 
    var isTimeoutRunning; 

    button.addEventListener("click", function(event) { 
     if (!buttonPressed) { 
      buttonPressed = true; 
      console.log(buttonPressed); 
     } else { 
      //This should stop the timeout function before scrollImages 
      //gets called? 
      window.clearTimeout(isTimeoutRunning); 
      buttonPressed = false; 
      console.log(buttonPressed); 
     } 
     var value; 
     value = input.value; 
     $.getJSON((url + input.value + end), function(flickrResponse){ 
      scrollImages(0, flickrResponse); 
     }); 
    }); 
}; 

var scrollImages = function(cycle, obj) { 
    if (cycle === obj.items.length) { 
     console.log("end reached"); 
     cycle = 0; 
    } 
    var imgsrc = document.querySelector("body img"); 
    imgsrc.setAttribute("src", obj.items[cycle].media.m); 

    isTimeoutRunning = setTimeout(function() { 
     console.log(isTimeoutRunning); 
     cycle += 1; 
     scrollImages(cycle, obj); 
    }, 2000) 
}; 

Answer 1

Sie benötigen isTimeoutRunning außerhalb zwei Funktionen zu definieren, zB

var isTimeoutRunning; 

var main = function() { 
    // don't redefine isTimeoutRunning here 

    // ... etc 
} 
var scrollImages = function(cycle, obj) { ... } 

Das Problem ist, dass die isTimeoutRunning in scrollImages als global definiert, dh window.isTimeoutRunning. Dies ist eine andere Variable als die in main definierte Variable.