Question

我有自动填充文本框需要一些改进。如果你打字慢，它工作正常，但如果你输入快，那么我得到多重结果重叠。例如，如果我一直擦除1个字母到结尾，我得到的结果是文本框中的字母很少。后来的结果看似正确，但看起来像是慢动作。

我已经尝试使用abort（）方法获取新的HTTP请求，但是没有解决问题。

方法是在文本框的键盘上触发的。

问题是如何停止先前的请求并注意当前的请求。

＆＃13;

function getResults(inputValue){
	var url="Ajax/acResults.aspx";
	url=url+"?input="+inputValue;
        url=url+"&idrnd="+Math.random();

	var xmlHttpPC=GetXmlHttpObject();
	xmlHttpPC.onreadystatechange=function(){
	    if (xmlHttpPC.readyState==4){ 
            document.getElementById("resultBox").innerHTML=xmlHttpPC.responseText;
        }
	};
	xmlHttpPC.open("GET",url,true);
	xmlHttpPC.send(null);
}

function GetXmlHttpObject(){
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

＆＃13;

经过一些测试后，我最终结合了abort方法和XMLHttpRequest对象的检查值：

＆＃13;

var xmlHttpPC=null;
function getResults(inputValue){
	var url="Ajax/acResults.aspx";
	url=url+"?input="+inputValue;
    url+="&idrnd="+Math.random();

	if (xmlHttpPC!=null) {
        xmlHttpPC.abort();
        xmlHttpPC = null;
    } 
    if (xmlHttpPC==null) {
        xmlHttpPC=GetXmlHttpObject();
    }
  
	xmlHttpPC.onreadystatechange=function(){
	    if (xmlHttpPC.readyState==4){ 
            document.getElementById("resultBox").innerHTML=xmlHttpPC.responseText;
            xmlHttpPC=null;
        }
	};
	xmlHttpPC.open("GET",url,true);
	xmlHttpPC.send(null);
}

＆＃13;

Answer 1

仅当没有删除或添加150ms的字母时，才使用debounce发送ajax调用（根据需要更改值）：

    function debounce(fn, delay) {
      var timer = null;
      return function () {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
          fn.apply(context, args);
        }, delay);
      };
    }

    var getResultsDebounced = debounce(getResults, 150); // now you have a new function called getResultsDebounced which being triggered after idle of 150ms

whatever.addEventListener("keyup",getResultsDebounced, false);

Answer 2

您可以通过检查标志变量来实现它，或者您可以只将xmlhttp变量与null进行比较，如下所示 -

var xmlHttp=null;
    function getResults(inputValue){
       if(xmlHttp!=null)
           return;
        //--------
            //-------
            if (xmlHttpPC.readyState==4)
                { 
                document.getElementById("resultBox").innerHTML=xmlHttpPC.responseText;
                xmlHttp=null;
                }
        };
        //--------
    }

    function GetXmlHttpObject(){
      xmlHttp=null;
      //------
    }

Javascript自动填充，但没有重叠结果

2 个答案: