Multiple set interval script

Question

I have a code to put two cameras on my site:

$(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")
            }
        });


});

And html code:

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

I can not create a script to make setinterval work for both imgs. It works only for one of them. Any suggestions how to make it works ? Set interval works only for one img.

Welcome to JavaScript 101: Closures. [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/q/750486/218196). Other strange things: `$(document).ready` inside the loop. Making an Ajax request inside the loop, even if it gives you the same response every time. Why don't you make the request once at the beginning? — Felix Kling, Mar 04 '15 at 15:50
ok i changed that. But still set interval works only for one img. How to make it works for both independently ? — user3422998, Mar 04 '15 at 16:09

score 1 · Answer 1 · answered Mar 04 '15 at 16:18

To give you an idea how to structure your application code:

Get the data from the server
Create the URLs from data
Update each image every X milliseconds with those URLs

In code:

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

Of course this can still be approved, but that should point you into the right direction. Note in particular that it is unnecessary to have a setInterval for each image. Just let a single interval update all images.

Especially the for loop can be approved upon. I don't know how many results data.results has and if you only want to get the first two, but this is an excellent use case for Array#map:

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

ok. updated the script (please check) now but it still refreshing only one img. What am I doing wrong ? — user3422998, Mar 04 '15 at 16:39
Please don't just change your question (or the code), otherwise the answers might become irrelevant. Either way, the code looks OK to me, maybe the URL doesn't produce new images. — Felix Kling, Mar 04 '15 at 16:40
ok.. I can see two images one is just static (not refreshing) second one is moving (refreshing). I am nor sure it is URL issue :/ — user3422998, Mar 04 '15 at 16:43
At this point you have to learn how to use your browser's developer tools, set breakpoints in your code, inspect variables and network requests. All you need in order to debug your code is there, you just have to use it: https://developer.chrome.com/devtools — Felix Kling, Mar 04 '15 at 16:45

Multiple set interval script

1 Answers1