如何使用cleartimeout停止.getJSON中的遞歸settimeout函數？

Question

這是基本網站的javascript代碼，該網站需要一個搜索詞並滾動瀏覽Flickr最近上傳的該搜索詞的某些圖片。

當用戶按下按鈕時，它將開始滾動Flickr圖像，但是如果他進入另一個圖像搜索並再次按下按鈕，則當前圖像滾動應停止，並且應滾動瀏覽新搜索詞中的圖像。

問題在於原始滾動不會停止，它所做的只是使兩者重疊。

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

您需要在兩個函數之外定義isTimeoutRunning ，例如

var isTimeoutRunning;

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

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

問題是在isTimeoutRunning中的scrollImages被定義為全局的，即window.isTimeoutRunning 。 與main定義的變量不同。