javascript - 在设定的时间后运行函数

Question

我有一个注册表单，我想使用 AJAX 动态检查提交的用户名的可用性。 到目前为止，我已经创建了一个带有 OnKeyUp 事件的输入字段，该事件调用名为 reg_un_check(); 的函数 问题是，在当前工作正常的设置下，该函数会在每次击键时运行。 我想在击键和函数调用之间进行某种“延迟”，让用户完成输入并节省一些带宽。 我尝试使用 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 中一个非常常见的概念，称为去抖动，lodash 库有它:https://lodash.com/docs#debounce

一个简单的方法就是这样:

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

一种更复杂的方法，但更通用的方法是让一个函数接收一个函数和一个延迟，并返回一个函数，该函数在调用时将执行带有延迟的函数并取消之前进行的调用延迟已经过去(即 lodash debounce 函数的作用)。

 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

希望我没有让事情变得过于复杂。