定時DOM更新使頁面變慢

Question

任何人都可以幫助我......如果我更改數據庫中的表中的值而不刷新頁面或單擊該頁面，我的腳本函數會自動更新數據庫中textboxes的輸出內容按鈕再次執行該腳本。

幾秒鐘後，我的網頁變成了lagy。我無法自由移動鼠標。如果我更改我的數據庫中的表中的值，有什麼方法可以自動更新我的textboxes中的數據？

當前腳本：

$(document).ready(function(){ 
    var timer ; 
    $('#send_search_form').click(function(event){ 
     event.preventDefault(); 
     $(".search_form_input").val(''); 
     $(".empty_batchcode").html("Doesn't exist!"); 
     clearInterval(timer); 
     updateTextboxes(); 
    }); 

    function updateTextboxes(){ 
     $.ajax({ 
     url:"search.php", 
     type:"GET", 
     data: { term : $('#query').val() }, 
     dataType:"JSON", 
     success: function(result) { 

      var ii = 1; 
      for (var i = 0; i < result.length; i++) { 
       $('#funiq_id').html(result[i].value).show(); 
       $('#t_region').val(result[i].region).show(); 
       $('#t_town').val(result[i].town).show(); 
       $('#t_uniq_id').val(result[i].uniq_id).show(); 
       $('#t_position').val(result[i].position).show(); 
       $('#t_salary_grade').val(result[i].salary_grade).show(); 
       $('#t_salary').val(result[i].salary).show(); 
       $('#id'+ii+'').val(result[i].atid).show(); 
       $('#aic'+ii+'').val(result[i].atic).show(); 
       $('#name'+ii+'').val(result[i].atname).show(); 
       $('#other_qual'+ii+'').val(result[i].other_sum).show(); 
       $('#interview'+ii+'').val(result[i].interview_sum).show(); 
       ii++; 
      } 

      if(timer == 1){ // if timer has been cleared 
       timer = setInterval(updateTextboxes,1000); // <-- change 1000 to the value you want 
      } 
     } 


     }); 

     timer = setInterval(updateTextboxes,1000); 
    } 
});  

的search.php代碼：

<?php 

if (isset($_GET['term'])) { 

    $q = $_GET['term']; 
    mysql_connect("localhost", "root", ""); 
    mysql_select_db("klayton"); 
    $query = mysql_query 
(" 
SELECT DISTINCT 
ROUND((SELECT SUM(t2.inttotal) 
FROM app_interview2 AS t2 
WHERE t2.atic = t.atic)/7,1) 
AS interview_sum, 

ROUND((SELECT SUM(o2.ototal) 
FROM other_app2 AS o2 
WHERE o2.oaic = t.atic)/7,1) 
AS other_sum, 

atid, 
atic, 
atname, 
region, 
town, 
uniq_id, 
position, 
salary_grade, 
salary 
FROM app_interview2 AS t 
WHERE uniq_id = '$q' 
GROUP BY t.atname HAVING COUNT(DISTINCT t.atic) "); 

    $data = array(); 

    while ($row = mysql_fetch_array($query)) { 
     $data[] = array(
      'value' => $row['uniq_id'], 
      'atid' => $row['atid'], 
      'atic' => $row['atic'], 
      'region' => $row['region'], 
      'town' => $row['town'], 
      'uniq_id' => $row['uniq_id'], 
      'position' => $row['position'], 
      'salary_grade' => $row['salary_grade'], 
      'salary' => $row['salary'], 
      'atname' => $row['atname'], 
      'other_sum' => $row['other_sum'], 
      'interview_sum' => $row['interview_sum'] 
     ); 
    } 

    header('Content-type: application/json'); 
    echo json_encode($data); 

} 

?> 

Answer 1

你在裏面setInterval S設定越來越setInterval S和永遠清除它們。請記住，每個setInterval調用結果功能運行多次，每N毫秒一次。隨着時間的推移，運行代碼的數量呈指數增長，從而導致滯後。

請考慮使用setTimeout代替。另外，setTimeout or setInterval?可能是一個很好的閱讀。

上述方法的文檔： https://developer.mozilla.org/en/docs/Web/API/window.setTimeout https://developer.mozilla.org/en/docs/Web/API/window.setInterval

Answer 2

兩件事情我已經注意到了。第一個是setInterval()。每循環文盲它啓動另一個計時器。 1秒= 1間隔，2秒= 2,3秒= 4（！），4秒= 8（!!）。所以幾秒鐘後，你的瀏覽器就會變得瘋狂。使用setTimeout()代替:)

第二個是保存DOM參考。每一個文盲你選擇的ID和設置一個新的價值。每一秒jQuery都會找到這些元素。最好先保存它們，然後使用保存的參考。我做了兩個：

var $funiq_id   = $('#funiq_id'), 
    $t_region   = $('#t_region'), 
    $t_town   = $('#t_town'), 
    $t_uniq_id  = $('#t_uniq_id'), 
    $t_position  = $('#t_position'), 
    $t_salary_grade = $('#t_salary_grade'), 
    $t_salary   = $('#t_salary'); 


function updateTextboxes(){ 
    $.ajax({ 
     url:"search.php", 
     type:"GET", 
     data: { term : $('#query').val() }, 
     dataType:"JSON", 
     success: function(result) { 
      if(result.changedOccured){ // make php send if there are changes (true/false) 
       var ii = 1; 
       var resultLength = result.length;// Out of the loop will improve a tiny bit 
       for (var i = 0; i < resultLength; i++) { 
        $funiq_id.html(result[i].value).show(); // reference 
        $t_region.val(result[i].region).show(); // reference 
        $t_town.val(result[i].town).show(); // reference 
        $t_uniq_id.val(result[i].uniq_id).show(); // reference 
        $t_position.val(result[i].position).show(); // reference 
        $t_salary_grade.val(result[i].salary_grade).show(); // reference 
        $t_salary.val(result[i].salary).show(); // reference 
        $('#id'+ii+'').val(result[i].atid).show(); 
        $('#aic'+ii+'').val(result[i].atic).show(); 
        $('#name'+ii+'').val(result[i].atname).show(); 
        $('#other_qual'+ii+'').val(result[i].other_sum).show(); 
        $('#interview'+ii+'').val(result[i].interview_sum).show(); 
        ii++; 
       } 
      } 
     } 
    } 


    if(timer == 1){ // if timer has been cleared 
     timer = setTimeOut(updateTextboxes,1000); // <-- change 1000 to the value you want 
    } 
} 

小記：保存DOM引用到變量需要在頁面底部的發生，或在$(document).ready()。元素必須存在，然後才能選擇它們

---

爲了獲得更好的性能，請使用PHP發送或不發生變化。如果有問題，請執行您現在的代碼。如果沒有變化，不要更新元素。將某些內容從「abc」改爲「abc」是浪費權力。