Question

我有一个问题，如下所示，我有一个文本框，在执行keyup事件后搜索联系人，联系人被附加到div，因为我也使用滚动分页，在keyup事件之后该div的内容是清理后用新内容替换它，但如果我写得很慢就会发生这种情况，因为当我写得非常快时，内容不会被替换但是会附加到现有内容上，因此重复相同的寄存器，可能是因为ajax是异步，并且在每个keyup之后它仍然执行请求。

码

    var paginam = 1;
    $('div.dvusuarios').scroll(function() {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            paginam++;
            listcontactosmsj($('#txtbuscaamgcon').val(), paginam);
        }
    });

      function listcontactosmsj(contacto, paginam) {
        $.ajax({
            type: 'GET',
            url: "<? echo PUBLIC_PATH . 'message/selcontacts' ?>",
            data: 'contacto=' + contacto
                    + '&pagina=' + paginam
        }).done(function(data) {
            $('div.dvusuarios').append(data);
        });
    }

    listcontactosmsj('', 1);

    $('#txtbuscaamgcon').keyup(function() {
        paginam = 1;
        $('div.dvusuarios').html('');
        listcontactosmsj($(this).val(),paginam );
    });

我试图像这样解决它，但这不起作用

 $('#txtbuscaamgcon').keyup(function() {
            paginam = 1;
            $('div.dvusuarios').html('');
            var refrescar = setInterval(listcontactosmsj($(this).val(),paginam), 5000);
             $.ajaxSetup({cache: false});
        });

我不知道我的源代码有什么问题，mysql和php脚本中的查询都可以。

Answer 1

首先，您应该在paginam下创建一个新的全局变量，如下所示：

var paginam = 1,
    contactRequest = false;

然后，将您的listcontactosmsj()功能更改为以下内容：

function listcontactosmsj(contacto, paginam) {
    if (contactRequest) {
        contactRequest.abort();
    }
    contactRequest = $.ajax({
        type: 'GET',
        url: "<? echo PUBLIC_PATH . 'message/selcontacts' ?>",
        data: 'contacto=' + contacto
                + '&pagina=' + paginam
    }).done(function(data) {
        $('div.dvusuarios').append(data);
        contactRequest = false;
    });
}

你对发生的事情是正确的。当您快速键入时，keyup事件会快速触发，并且会快速发送多个AJAX请求。通过此修改，listcontactosmsj()函数将检查当前是否有请求。如果有，它会取消请求，并启动一个新请求。

Answer 2

每次按下一个键时发送一个新的AJAX请求不是显示动态数据列表的方法。

替代方法1

加载页面时，找到一种合理且快速的方法来加载可能与页面相关的所有联系人。在加载初始内容后，用户在没有任何AJAX的情况下键入过滤列表。

替代方法2

限制执行AJAX调用的次数 - 类似于setTimeout，以检查输入文本是否每250毫秒左右更改一次。这可能表现不佳，具体取决于服务器响应AJAX请求的速度，并且响应时间不能保证在250毫秒的阈值范围内，所以我不会使用这种方法。

密钥后，AJAX会发生奇怪的事情

2 个答案:

替代方法1

替代方法2