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

我有一个注册表单，我想动态检查使用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); 
    } 
}

任何人都可以提出一个不同的或更好的方式来做到这一点？谢谢。

来源

2014-10-17 Alex

因为你不取消超时....一堆具有同样问题的时间，找到一个。 – epascarello 2014-10-17 20:05:53

不是这个的粉丝：http://stackoverflow.com/questions/7373023/throttle-event-calls-in-jquery仍然在寻找一个更好的。 – epascarello 2014-10-17 20:07:56

它总让我感到惊讶，有些人会使用jQuery作为DOM，但是随后手工制作XMLHttpRequest对象来完成他们的AJAX。 – Alnitak 2014-10-17 20:09:00

这是在JavaScript中很常见的概念，称为反跳，lodash库有它：https://lodash.com/docs#debounce

一个简单的方法来使你的自我是这样的：

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

一个更复杂的方法，但一个更通用的方法是获得一个函数，它接收一个函数和一个延迟，并返回一个函数，该函数在调用时将执行该函数并延迟并取消在延迟过去之前所做的调用（即，什么消除了抖动功能确实）。

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

希望我没有把它复杂化。

来源

2014-10-17 20:10:59 PiniH

只是FYI，反弹和调节是两个略有不同的概念。在一段时间内没有重复动作（这正是你正确显示的动作），限制动作会限制一个动作可以在给定时间内重复的次数。 http://drupalmotion.com/article/debounce-and-throttle-visual-explanation – 2014-10-17 20:16:43

噢好吧，现在的名字是有道理的:)编辑，以反映你说的话。 – PiniH 2014-10-18 07:39:42

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

回答

相关问题