Question

当我在网站收件箱中输入文字时，我试图停止在表格中显示一些数据。

我有事件键盘whitch搜索数据库中的一些数据，然后在网站上显示它。但是当有人输入更长的文本时，会多次触发许多字母的事件。我想在输入另一个标志时取消上一个事件，这样只有最后一个事件才会显示正确的数据。

现在，当我快速输入一些文字时，我会显示两次甚至更多的数据......

我使用的代码（简化版）低于......

有人可以建议我怎么独自一人？

$( "#SAPdescription" ).keyup(function() {
    // Clear table
    $('#tblListSAP tbody').empty();

    if($('#SAPdescription').val().length >= 3)
    {
        $.ajax({
            type: "POST",
            url: "php/list_SAP.php",
            data: {
                SAPdescription: (!$('#SAPdescription').val()) ? "NULL" : $('#SAPdescription').val()
            },
            success: function(msg){
                if(msg.substr(0,5) == 'ERROR')
                {
                    error(msg);
                }
                else
                {
                    if(xmlRoot = getXML(msg))
                    {       
                        var rows = $(xmlRoot).find('row');
                        for(var i=0 ; i<rows.length ; i++)
                        {
                            var tr = $('<tr></tr>');

                            tr.append($('<td></td>').text(rows.eq(i).find('sapdescription').eq(0).text()));


                            $('#tblListSAP tbody').append(tr);
                        }
                    }
                    else
                    {
                        error('No data in received XML file!');
                    }
                }
            },
            error: AjaxErrorFunction
        });
    }
});

Answer 1

像这样的东西。未经测试并写在记事本中，希望它能够正常工作......

延迟函数以防止持续调用，如果它也是中间调用则中止它。

var xhr = null;
var timer = null;

$( "#SAPdescription" ).keyup(function() {
    // Clear table
    $('#tblListSAP tbody').empty();

    if($('#SAPdescription').val().length >= 3)
    {
        //if timer exists, reset it
        if (timer != null) {
            clearTimeout(timer);
            timer = null;
        }
        //abort the ajax call
        if (xhr != null) {
            xhr.abort();
            xhr = null;
        }

        //call function in 250ms to prevent it being repeatedly called every keyup
        timer = setTimeout(getList, 250);
    }
});

function getList() {
    xhr = $.ajax({
        type: "POST",
        url: "php/list_SAP.php",
        data: {
            SAPdescription: (!$('#SAPdescription').val()) ? "NULL" : $('#SAPdescription').val()
        },
        success: function(msg){
            if(msg.substr(0,5) == 'ERROR')
            {
                error(msg);
            }
            else
            {
                if(xmlRoot = getXML(msg))
                {       
                    var rows = $(xmlRoot).find('row');
                    for(var i=0 ; i<rows.length ; i++)
                    {
                        var tr = $('<tr></tr>');

                        tr.append($('<td></td>').text(rows.eq(i).find('sapdescription').eq(0).text()));


                        $('#tblListSAP tbody').append(tr);
                    }
                }
                else
                {
                    error('No data in received XML file!');
                }
            }
        },
        error: AjaxErrorFunction
    });
}

触发另一个keyup事件时jquery keyup取消

1 个答案: