时间戳

首页 > 解决方案 > 根据您键入的速度，onkeyup 会触发多次

javascript - 根据您键入的速度，onkeyup 会触发多次

问题描述

我遇到了一个非常奇怪的onkeyup函数问题。根据人打字的速度，由打字触发的功能可能会运行多次。

var inputFilter = document.getElementById('inputFilter');
inputFilter.onkeyup = function(e, value) {
e.preventDefault();
 value = e.target.value
   if (value.length >= 3) {
     console.log(value);
      getItems(value);
   }
};

如果我打字慢，该getItems()功能运行完美，但如果我打字非常快，它的行为很奇怪。该getItems()函数使用 Ajax( ) 从 SharePoint 列表中提取数据XMLHttpRequest()，并创建一个包含结果的表。如果我打字慢，表格就好了，但如果我打字快，每个表格行都会重复。我在 getItems() 函数中添加了 abody.innerHTML = ''以确保它在每次运行该函数时清空表的主体：

 const table = document.getElementById('smeTable'),
 body = table.getElementsByTagName('tbody')[0];
 body.innerHTML = '';

我不是程序员，对于这个可能很愚蠢的问题，我可能会得到很多反对票，但我对这个问题感到困惑。任何想法，将不胜感激。谢谢你。

标签： javascript

解决方案

这可能是因为您在短时间内产生了大量 ajax 请求，并且由于响应是异步的，因此对先前 keyUp 事件的响应可能会在当前 keyup 的响应之后加载，并且可能会搞砸，特别是如果您是拉一些自动完成的结果。

我通常会在创建新请求时放弃以前的 ajax 请求。您可以按照此处关于如何中止先前请求的答案进行操作： Abort previous ajax request on new request

 var currentRequest = null;    

currentRequest = jQuery.ajax({
    type: 'POST',
    data: 'value=' + text,
    url: 'AJAX_URL',
    beforeSend : function()    {           
        if(currentRequest != null) {
            currentRequest.abort();
        }
    },
    success: function(data) {
        // Success
    },
    error:function(e){
      // Error
    }
});

推荐阅读