Сделать первый запрос к серверу с периодом обновления в 1 сек

166
30 мая 2019, 16:10

Есть маленькая проблема . У меня вся страница обновляется с периодом в 5 сек и соответственно когда первый раз картинка грузится то появляется через 5 сек только ,а нужно чтоб первый запрос произошел за секунду ,а последующие так же продолжали обновляться за 5 сек. Как это сообразить ?

    // привязываемся к  svg файлу
var mapSvg = document.getElementById("map-svg"); 
var mapContDoc = mapSvg.contentDocument;
//создаем объект  ajax
var xmlhttp = new XMLHttpRequest(); //создаем объект  ajax

 // создаем  массив всех объектов для управления
 var names = 'NVD_9,NVD_10,NVD_11,NVD_12,PD_A1,PD_A2,A1_MD11,A1_MD12,A2_MD21,A2_MD22,KR_A1,KR_A2,PD_A3,MD11,MD12,MD21,MD22,ZK_12,ZK_34,ZN_56,ALARM_1,'+ 
                 'MD11_KR,MD12_KR,MD21_KR,MD22_KR,KR1_KR2,KR1_1,KR1_2,KR2_1,'+           
                 'N_1K,N_2K,N_3K,N_4K,N_5K,N_6K,PUMP_1K,PUMP_2K,PUMP_3K,PUMP_4K,PUMP_5K,PUMP_6K,PUMP_P11,PUMP_P12,PUMP_P21,PUMP_P22,PUMP_5K6K,'+
                 'N_1P,N_2P,N_3P,N_4P,N_5P,N_6P,N_7P,VAK_1,VAK_2,VAK_3,VAK_4,VAK_5,VAK_6,VAK_7,VAK_8,VAK_9,VAK_10,VAK_11,VAK_12,VAK_13,VAK_14,VAK_15,VAK_16,PUM_KO,PUM_KV,'+
                 'TVD_1,TVD_2,TVD_3,TVD_4,TVD_6,ZF_152,ZF_364,N_1F,N_5F,N_2F,N_3F,N_6F,N_4F,FIL_56,FIL_55,FIL_54,FIL_53,FIL_52,FIL_51,'+
                 'FIL_46,FIL_45,FIL_44,FIL_43,FIL_42,FIL_41,FIL_36,FIL_35,FIL_34,FIL_32,FIL_31,FIL_26,FIL_25,FIL_24,FIL_23,FIL_22,FIL_21,FIL_16,FIL_15,FIL_14,FIL_13,FIL_12,FIL_11,'+
                 'OF3_1,OF3_2,OF3_3,OF3_4,PUM_OF1,PUM_OF2,PUM_OF3,PUM_OF4,PUM_OF5,ZD_123,N_DR1,N_DR2,N_DR3,TC_1,TC_2,DV_1,RV_1,DW_1,PUM_OF6,PUM_OF7,PUM_OF8,PUM_OF9,PUM_OF10,'+
                 'PUM_CK23,PUM_CK22,PUM_CK22-1,PUM_CK2P,PUM_CK4P,PUM_PM-2,PUM_PU1-1,PUM_PU1-2,PUM_PU2-1,PUM_PU2-2,PUM_H1,PUM_H2,PUM_H3,PUM_H4,'+
                 'PUM_CK-1P,PUM_CK-3P,PUM_PM-1,PUM_CK18,PUM_CK17,PUM_CK21,PUM_CK21-1,PB_1,PB_2,SB_1,SB_2,SB_3,SB_4,SB_5,SB_6,SB_7,SB_8,N_AL1,N_AL2,N_AL3,N_AL4';

 var arr = names.split(',');
 // общие настройки страницы
 var fps  = 4;      // кол-во обновлений на экране  в сек
 var ask  = 5000; // период  запроса информации с сервера  в мсек

 // вспомогательные переменные для различных функций
 var blnker =  0 ;  // для функции  "блинк"
 var ask_nmb = 1 ;  // пор.номер  запроса к серверу

//----------------------- управления svg объектами------------------------------ 
function anim() {
    setTimeout(function() {
        // привязываемся к  svg файлу
        var mapSvg = document.getElementById("map-svg"); 
        var mapContDoc = mapSvg.contentDocument;        
        // переменные для данной функции
        var obj ;
        var element ;
        var look ;
      //визуализация работы скрипта -> объект mr 
        if(blnker==0){blnker=1;}
      else{blnker=0;}
      if(element = mapContDoc.getElementById('mr')){
        if (blnker==0) {    look  = 'fill:black;stroke:black;stroke-width:0.3;';}
            if (blnker==1) {    look  = 'fill:gray;stroke:black;stroke-width:0.3;';}
            element.setAttribute('style', look) ;
      }
      // обработка объектов из массива   arr
      for (var i = 0; i < arr.length; i++) {
            obj   = arr[i] ;
            if(element = mapContDoc.getElementById(obj)){
                if(element.getAttribute('type') == "1"){ func_type1(element); }
                if(element.getAttribute('type') == "2"){ func_type2(element); }
                if(element.getAttribute('type') == "3"){ func_type3(element); }
                if(element.getAttribute('type') == "4"){ func_type4(element); }
                if(element.getAttribute('type') == "10"){func_type10(element);}
            }
        }
        requestAnimationFrame(anim);
    }, 1000 / fps);
}

// тип 1: изменение цвета заливки и линий, толщины линий
function func_type1(element) {

    // формируем нужные переменные
    var look = "x";
    if(element.getAttribute('color')){     
    if(element.getAttribute('blnk')!="none"){
        if(blnker==0){ look  = element.getAttribute('color');}
         if(blnker==1){ look  = element.getAttribute('blnk');}
      }else{
        look  = element.getAttribute('color');
      }
      element.setAttribute('style', look);
    }
}
// тип 4: изменение цвета и содержания текстового поля
function func_type4(element) {
    if(element.getAttribute('font')){     
    if(element.getAttribute('txt')){
        element.textContent = element.getAttribute('txt') ;
        element.setAttribute('style', element.getAttribute('font'));
      }
    }   
}
//======================== получение информации от сервера ================================
function get_inform() {
    console.log(' '); 
    console.log('------------------ ask server ' + ask_nmb + ' -------------------------'); 

    // привязываемся к  svg файлу
    var mapSvg = document.getElementById("map-svg"); 
    var mapContDoc = mapSvg.contentDocument;
    // переменные для данной функции
    var ask_obj ;   // перечень запрашиваемых объектов с параметрами  в формате json
    var inform  ;   // полученная информация в формате json
    var nmbr;       // кол-во  объектов json
    var element;
    var i ;
    var x ;
    // обрабатываем  ответ от сервера на свой запрос    
    xmlhttp.onreadystatechange=function(){
      if (this.readyState == 4 && this.status == 200) {
        inform = JSON.parse(xmlhttp.responseText);
    nmbr = inform.length;
    console.log('answer = ' + xmlhttp.responseText);        
    console.log('you have nmbr = ' + nmbr);         
    for (i = 0; i < nmbr; i++) {
        if(element = mapContDoc.getElementById(inform[i].obj)){ x = 'obj is on page' ;}
        else {x = 'err - there is not on page' ;}
        if (inform[i].obj=="end") { x = 'end of answer' ;}
        console.log('obj = ' + inform[i].obj + '  /  type = ' + inform[i].type + '  /  ' + x);
        if(x == "obj is on page"){
            // ТИП 1. изменение цвета, толщ.линий
            if (inform[i].type == "1") {   
                element.setAttribute('type', inform[i].type);
                element.setAttribute('color', inform[i].color);
               element.setAttribute('blnk',  inform[i].blnk);
            } 

            // ТИП 4. изменение цвета, содержание
            if (inform[i].type == "4") {   
                element.setAttribute('type', inform[i].type);
                element.setAttribute('font', inform[i].font);
                element.setAttribute('txt',  inform[i].txt);
            }

        }
    }
    }
    }
    // отсылаем  запрос к серверу 
    // p - страница
    // g - группа на странице
    // tmp -> Date.now()  нужен для  "отключения" кеширования ответа
    xmlhttp.open("GET","answer_1.php?p=1&g=1&tmp=" + Date.now(),true);
   xmlhttp.send(); 
    setTimeout(get_inform, ask, ask_nmb);        
}
//*************** запускаем  функции на  выполнение *****************  
anim();         // управление объектами  
get_inform();   // запрос информации с сервера 
//*******************************************************************
Answer 1

Зачем ждать одну секунду?

вместо

//*************** запускаем  функции на  выполнение *****************  
anim();         // управление объектами  
get_inform();   // запрос информации с сервера

Подождем загрузки документа и запустим

document.addEventListener("DOMContentLoaded", function(event) { 
  anim();         // управление объектами  
  get_inform();   // запрос информации с сервера
});
READ ALSO
Замена forEach для IE 11 [дубликат]

Замена forEach для IE 11 [дубликат]

На данный вопрос уже ответили:

178
Фильтр по дате utc [требует правки]

Фильтр по дате utc [требует правки]

не могу сообразить как написать фильтр по дате с/по

191
всплытие переменных после import

всплытие переменных после import

Есть ли всплытие переменной var (и соотв-но не всплытие const, let) при ее экспорте из файла? Те

167