Question

我正在为远程api编写REST客户端。我正在使用xmlHTTPRequest获取有关images的信息。我需要每隔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

当url通过ajax获取时，如何通过setTimeout刷新图像？

2 个答案: