Question

我通过使用rest api对服务器进行ajax调用来验证电子邮件，我能够做得很好，但我希望我的方法等到请求完成或等待2,3秒（无论标准）是在继续尝试之前...

这是代码中发生的事情，

var regexEmail = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var $imgEmail = $("#emailValidateImg");
var $txtEmail = $("#txtEmail");
var ValidateEmailClientSide = function () {
    $imgEmail.attr('src', waitImg).show();
    var email = $txtEmail.val();
    console.log(regexEmail.test(email));

    if (email && regexEmail.test(email)) {
        ValidateEmailServerSide();
    }
    else {
        $imgEmail.attr('src', redImg).show();
        $(".form_row").slice(2, 5).show();
    }
};
var ValidateEmailServerSide = function () {
    $.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/my/my.svc/Users/Exists/", { email: $txtEmail.val() })
        .done(function (data) {
            $imgEmail.attr('src', greenImg).show();

            var $details = $(".form_row").slice(2, 5).show();
            var emailExists = data.UserExistsResult;
            if (emailExists == 1) {
                $details.hide();
            }
        })
};
$txtEmail.on('keyup keypress blur change paste cut', ValidateEmailClientSide);

我想在超时中包含上面的代码，

也许我可以这样做，

clearTimeout(ValidateEmailClientSide.timeout);
ValidateEmailClientSide.timeout = setTimeout(function(){
    // Rest of code goes here
}, 100);

我想做什么

我想在开始验证之前给用户一些时间，比如2,3秒，如果用户再次开始与输入交互，则停止请求并再次等待2,3秒，然后再发出请求。

Answer 1

您想要创建一个变量ajaxRunning，例如，它将保持ajax调用的状态; false - 未运行，true - 正在运行。如果false则调用ajax函数，否则不要。当ajax呼叫开始运行时，将其设置为true，一旦完成，将其设置为false。这应该可以帮助你在没有ajax调用运行的情况下进行ajax调用。

var $txtEmail = $("#txtEmail");
var ajaxRunning = false; // <<=======
var ValidateEmailClientSide = function () {
    $imgEmail.attr('src', waitImg).show();
    var email = $txtEmail.val();
    console.log(regexEmail.test(email));

    if (email && regexEmail.test(email) && !ajaxRunning) { //<<====
        ValidateEmailServerSide();
    }
    else {
        $imgEmail.attr('src', redImg).show();
        $(".form_row").slice(2, 5).show();
    }
};
var ValidateEmailServerSide = function () {
    ajaxRunning = true; //<<====
    $.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/my/my.svc/Users/Exists/", { email: $txtEmail.val() })
        .done(function (data) {
            ajaxRunning = false; //<<<=====
            $imgEmail.attr('src', greenImg).show();

            var $details = $(".form_row").slice(2, 5).show();
            var emailExists = data.UserExistsResult;
            if (emailExists == 1) {
                $details.hide();
            }
        })
};

但是，如果您希望在ajax调用完成后进行客户端检查和服务器端检查????，那么您希望更改逻辑以在ajax回调中进行检查。就使用超时而言，无法保证在设定的时间之后完成ajax调用。唯一的保证是回调。

Answer 2

您正在寻找debounce功能：

http://davidwalsh.name/function-debounce

https://lodash.com/docs#debounce

var validateEmailServerSide = debounce(function () {
  // …
}, 2000);

演示：http://codepen.io/anon/pen/JYdqVv?editors=101

方法是一次又一次地调用

2 个答案: