多组间隔脚本

Multiple set interval script

本文关键字：脚本      更新时间：2023-09-26

我有一个代码可以在我的网站上放置两个相机：

$(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同时适用于两个img。它只对其中一个有效。有什么建议可以让它发挥作用吗？设置间隔仅适用于一个img。

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

  • 从服务器获取数据
  • 根据数据创建URL
  • 使用这些URL每隔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);
});

当然，这仍然可以得到批准，但这应该为你指明正确的方向。特别注意，没有必要对于每个图像具有CCD_ 1。只需让一个时间间隔更新所有图像。

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

var urls = data.results.map(function(result) {
    // ...
    return cameraFeed;
});
相关文章：