setInterval 在生成 30 多个数据时开始我的页面滞后答案

【问题标题】：setInterval starts my page to lag when it generates 30 plus datasetInterval 在生成 30 多个数据时开始我的页面滞后
【发布时间】：2014-03-18 11:18:49
【问题描述】：

任何人都可以帮助我解决 setInterval 的问题，因为如果它在我的页面中的静态 textboxes 中生成 30 plus more data，它就会像 pause and resume 一样在我的页面中发生。有谁知道如何解决我的问题中的滞后问题？

<script>
$(document).ready(function(){

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');
var auto_refresh = setInterval(
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().trigger('input');
                    $t_town.val(result[i].town).show().trigger('input'); 
                    $t_uniq_id.val(result[i].uniq_id).show().trigger('input'); 
                    $t_position.val(result[i].position).show().trigger('input');
                    $t_salary_grade.val(result[i].salary_grade).show().trigger('input'); 
                    $t_salary.val(result[i].salary).show().trigger('input');
                    $('#id'+ii+'').val(result[i].atid).show().trigger('input');
                    $('#aic'+ii+'').val(result[i].atic).show().trigger('input');
                    $('#name'+ii+'').val(result[i].atname).show().trigger('input');
                    $('#other_qual'+ii+'').val(result[i].other_sum).show().trigger('input');
                    $('#interview'+ii+'').val(result[i].interview_sum).show().trigger('input');
                    $('#optA'+ii+'').val(result[i].edu_attain2_sum).show().trigger('input');
                    $('#optB'+ii+'').val(result[i].experience2_sum).show().trigger('input');
                    $('#optC'+ii+'').val(result[i].trainings2_sum).show().trigger('input');
                    $('#optD'+ii+'').val(result[i].eligibility2_sum).show().trigger('input');
                    $('#total'+ii+'').val(result[i].final_total_sum).show().trigger('input');
                    $(':input').removeAttr('placeholder');
            ii++;
            }

        }


    });


},500);
         $('.search_form_input').val('');
         $('.search_textbox').val('');
         $(".empty_batchcode").html("");
         $('#execute').prop('disabled', true);


});      
</script>

【问题讨论】：

您应该重新考虑您的逻辑，首先使用超时，而不是间隔，并在 ajax 完成回调中调用超时。无论如何，你似乎在这么少的空间时间里做的太多了。而且我真的不明白为什么你需要在间隔/超时中调用它而不是使用相关的处理程序作为文本框的 onchange 事件

标签： javascript php jquery mysql json

【解决方案1】：

您每 500 毫秒执行一次异步请求，因此它们很可能会开始排队，您的浏览器将无法及时完成它们。

您可以增加间隔，但最好删除 setInterval 并仅在完成时执行另一个请求，即在您的 success 函数内：

例如

success: function(result) {
...
//at the end of the function
updateTextboxes(); //or setTimeout(updateTextboxes, 500);
}

如果您只想在输入更改后调用它，那么您可以完全删除 setInterval/setTimeout 并附加到 onblur 或 onkeydown 事件，例如

<input id='search' type="text" onkeydown="updateTextboxes()">

或使用 jQuery

$('#search').change(updateTextboxes);

【讨论】：

如果我删除 setInterval 并且只在它完成我的整个脚本时才执行另一个请求。
如果我输入搜索框输入，我的脚本中的 setinterval 就是让我的脚本一直工作的那个。
在这种情况下，您只需在搜索输入值发生变化时调用updateTextboxes。因此，您可以将其附加到 onkeydown 或 onblur 事件，例如<input onblur='updateTextBoxes()'/>
我尝试了 keydown 和 blur 事件，但我的数据不会显示，所以我最后的手段是 setInterval
尝试使用 jQuery 更改（如上）。如果 jQuery 或 blur/keydown 不起作用，那么您需要在 updateTextboxes 中放置警报或其他内容以确保它被调用。另请查看您的页面上是否存在任何 JavaScript 错误。