Question

任何人都可以帮助我...如果我更改数据库中表格中的值而不刷新页面或再次单击按钮，我的脚本函数会自动更新数据库中textboxes输出内的内容执行脚本。

几秒钟后，我的页面很乱。我无法自由移动鼠标。如果我更改数据库中表格中的值，有没有办法如何使用javascript自动更新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内设置的setInterval越来越多，而且从不清除它们。请记住，每个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() :)

第二个是保存DOMreference。你选择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”是浪费权力。

定时DOM更新使页面变慢

2 个答案: