javascript - 多组间隔脚本

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 都起作用。它只适用于其中之一。有什么建议如何使其发挥作用吗？ 设置间隔仅适用于一张图片。

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;
});