在设定的时间后运行一个函数

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

希望我没有把它弄得太复杂。