當URL通過Ajax獲取時，如何通過setTimeout刷新圖像？

Question

我正在將REST客戶端編寫為遠程api。 我正在使用xmlHTTPRequest獲取有關圖像的信息。我需要每30秒刷新一次圖像。 我的setTimeout函數實現不起作用。 有人可以幫助我嗎？ 先感謝您。

這是我的代碼：Image.js

function Camera(id, name, ip, port) {
var button = document.createElement("button");
button.classList.add("camera");
button.innerHTML += "<h3>" + name + "</h3><br>";
var ismin = true;

this.id = id;
this.name = name;
this.ip = ip;
this.port = port;


this.getURL = function getURL(min) {
    var url = 'http://' + ip + ":8080/api";
    return min ? url + '/miniature/' + id + '?t=' + new Date().getTime() : url + '/image/' + id + '?t=' + new Date().getTime();
};

this.appendImg = function appendImg(url) {
    button.innerHTML = "<h3>" + name + '</h3><br><img src="' + url + '"/>';
    setTimeout(appendImg(url),30000);
};

this.showElement = function showElement(url) {
    this.appendImg(url);
    var that = this;
    document.querySelector('#camera-section').appendChild(button);
    button.addEventListener('click', function () {
        ismin = !ismin;
        that.appendImg(that.getURL(ismin), false);

    });
};}

還有main.js的一部分：

function showImage(response) {
    response =  JSON.parse(sessionStorage.getItem('camera'));
    console.log(response);
    for (var i = 0; i < response.length; i++) {
        var a = response[i];
        var camera = new Camera(a.cameraId, a.name, ip, port, true);
        var curl = camera.getURL(true);
        camera.showElement(curl);
    }

}

xml.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var response = JSON.parse(this.responseText);
        sessionStorage.setItem('camera',JSON.stringify(response));
        //console.log(sessionStorage.getItem('camera'));
        showImage(sessionStorage.getItem('camera'));
    }
};

xml.open('GET', mainUrl);
xml.send(null);

Answer 1

關於Pranay Kumar的注釋，代碼的第一部分可能是這樣的：

function Camera(id, name, ip, port) {
    var button = document.createElement("button");
    button.classList.add("camera");
    button.innerHTML += "<h3>" + name + "</h3><br>";
    var ismin = true;

    this.id = id;
    this.name = name;
    this.ip = ip;
    this.port = port;

    this.getURL = function getURL(min) {
        var url = 'http://' + ip + ":8080/api";
        return min ? url + '/miniature/' + id + '?t=' + new Date().getTime() : url + '/image/' + id + '?t=' + new Date().getTime();
    };

    this._appendImg = function(url) {
        return function() {
             button.innerHTML = "<h3>" + name + '</h3><br><img src="' + url + '"/>';
        }
    };

    this._timerHandle = 0;

    this.appendImg = function(url) {
        if (this._timerHandle) {
            clearInterval(this._timerHandle);
        }
        this._timerHandle = setInterval(this._appendImg(url),30000);
    }    

    this.showElement = function showElement(url) {
        this.appendImg(url);
        var that = this;
        document.querySelector('#camera-section').appendChild(button);
        button.addEventListener('click', function () {
            ismin = !ismin;
            that.appendImg(that.getURL(ismin), false);
        });
    }
}

Answer 2

您要每30秒刷新一次圖像。

因此，請使用setInterval而不是setTimeout