Question

我有一个代码可以在我的网站上放置两个摄像头：

$(document).ready(function(){
    var m;
    var index;
    var IP;
    var port;
    var name;
    var user;
    var password;
    var image_old;
    var image_new;
    var cameraFeed;
    var topImage;
    var urls = [];

        $.ajax({
            type: "GET",
            url: "json.htm?type=cameras",
            dataType: "JSON",
            async : false,
            success: function(data) {

                for(m=0; m<=1; m++){

                    index = data.result[m].idx;
                    IP = data.result[m].Address;
                    port = data.result[m].Port;
                    name = data.result[m].Name;
                    user = data.result[m].Username;
                    password = data.result[m].Password;
                    image_old = data.result[m].ImageURL;
                    image_new = image_old.replace("#USERNAME", user).replace("#PASSWORD", password);

                    cameraFeed = "http://" + IP + ":" + port + "/" + image_new;
                    alert(cameraFeed + m);
                    urls.push(cameraFeed);




                }
                setInterval(function() {
                    var d = Date.now();
                    $.each(urls, function(i, url) {
                        $('#topImage' + i).attr('src', url + "&timestamp=" + d);
                    });
                }, 100);
            },
            error: function(data) {
                alert("Error")
            }
        });


});

和HTML代码：

<img id="topImage0" width="640px">
<img id="topImage1" width="640px">

我无法创建一个脚本来使setinterval同时适用于两个imgs。它仅适用于其中一个。有任何建议如何使其工作？设置间隔仅适用于一个img。

Answer 1

为了让您了解如何构建应用程序代码：

从服务器获取数据
从数据
使用这些网址每隔X毫秒更新一次图像

在代码中：

$.ajax({...}).done(function(data) { // get data from server
    // create URLs
    var urls = [];
    for (var m = 0; m < 2; m++) { // why not iterate over data.results?
        var cameraFeed;
        // build cameraFeed ...
        urls.push(cameraFeed);
    }

    // Update images
    setInterval(function() {
        var d = Date.now();
        $.each(urls, function(i, url) {
            $('#topImage' + i).attr('src', url + "&timestamp=" + d);
        });
    }, 100);
});

当然，这仍然可以获得批准，但这应该指向正确的方向。请特别注意，每张图片都没有setInterval。只需让一个间隔更新所有图像。

尤其可以批准for循环。我不知道data.results有多少结果，如果你只想获得前两个，但这是Array#map的一个很好的用例：

var urls = data.results.map(function(result) {
    // ...
    return cameraFeed;
});

多集间隔脚本

1 个答案: