Question

我有一个注册表单，我想使用AJAX动态检查提交的用户名可用性。到目前为止，我已经使用OnKeyUp事件创建了一个输入字段，该事件调用了一个名为reg_un_check();的函数问题是，在当前设置下，工作正常，该功能运行每个按键。我想做一些＆＃34;延迟＆＃34;在击键和函数调用之间让用户完成输入并节省一些带宽。我尝试使用SetTimeout()，但它只延迟了AJAX请求之间的时间。这是我到目前为止所做的：

输入字段：

<input type="text" value="user name" id="reg_un" onclick="reg_un_in()" onblur="reg_un_out()" onkeyup="reg_un_check()">
<div class="alerts" id="reg_un_alert"></div> // div that pops out if the UN isnt valid
<div class="reg_unc" id="reg_unc_alert"></div> // div that pops out when its checking for the availability

AJAX功能：

function reg_un_check(){
    if(reg_un.value.length > 1){
        $("#reg_un_alert").slideUp(150);
        var un_data = "un=" + reg_un.value;
        $("#reg_unc_alert").slideDown(150,function () {
            var un_check = setTimeout(function(){
                xmlhttp.onreadystatechange=function() {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        reg_unc_alert.innerHTML = xmlhttp.responseText;
                    }                                               
                    else{
                        reg_unc_alert.innerHTML = "checking for availability...";                           
                    }
                };
                xmlhttp.open("POST",'un_check.php',true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send(un_data);                      
            },2000);            
        });
    }
    else{
        $("#reg_unc_alert").slideUp(150);
        reg_un_alert.innerHTML = "the user name must be at least 2 characters long";
        $("#reg_un_alert").slideDown(150);
    }
}

有人可以提出不同或更好的方法吗？感谢。

Answer 1

这是javascript中一个非常常见的概念，称为debouncing，lodash库有它：https://lodash.com/docs#debounce

让自己成为自己的简单方法就是这样：

var timeoutId;
function debounceFunction() {
   clearTimeout(timeoutId); //no worries if timeoutid is undefined
   timeoutId = setTimeout(delayedWorkFunction, delay);
}

一种更复杂的方式，但更通用的方法是使用一个接收函数和延迟的函数，并返回一个函数，该函数在调用时将执行具有延迟的函数并取消之前进行的调用延迟已经过去（即lodash去抖功能）。

 function debounce(cb, delay) {
      var tId;
      var retFunc = function() {
          clearTimeout(tId);
          setTimeout(cb, delay);
      }
      return retFunc;
  }

function work() {
     //your logic here
}

var delayedWork = debounce(work, 150);
//now calling delayedWork will do what you want

希望我没有让它复杂化。

在一段时间后运行一个函数

1 个答案: