如何使用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定义的变量不同。