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中定义的变量不同的变量。

如何使用cleartimeout在.getJSON中停止递归settimeout函数？

1 个答案: