Multiple установить интервал сценария

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 работу для обоих ГИМ , Он работает только для одного из них. Любые предложения, как это сделать? Интервал установки работает только для одного img.

Answer 1

Чтобы дать вам представление о том, как структурировать код приложения:

• Получить данные с сервера
• Создание URL-адресов из данных
• Обновление каждого изображения каждые X миллисекунд с этих URL-адресов

В коде:

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