gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:37:18 26 4
gpt4 key购买 nike

我有一个注册表单,我想使用 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);
}
}

有人可以建议一种不同的或更好的方法吗?谢谢。

最佳答案

这是 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

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

关于javascript - 在设定的时间后运行函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26432635/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com