javascript - AJAX 似乎比我的其他代码运行得更快

Question

我有一个“忘记密码”脚本，允许用户在收到电子邮件后重置密码。由于某种原因，我无法让它持续工作。它的工作率约为 70%，但有时仍会提供不正确的信息。

用户应该输入他们的用户名，然后创建一个新密码，然后验证新密码。该用户名与 PHP 文件中经过加盐和哈希处理的用户名进行比较。如果输入的用户名与经过加盐和哈希处理的用户名匹配，则用户名输入框旁边会出现一个复选标记。

只有当用户输入姓名的速度非常缓慢时，这种方法才能 100% 有效。我只是假设这是一个常见的 AJAX/JavaScript/jQuery 问题，但我可能是错的。如果用户缓慢输入姓名，那么当输入最后一个字母时，他们会得到一个复选标记。当用户快速输入名字时，我可以复制这个问题。十分之三的情况是，在他们输入最后一个字母后，即使他们输入了正确的用户名，系统也不会将其识别为正确的。如果他们删除最后一个字母，然后再次输入(与最后一个字母完全相同)，它就会将其识别为正确的用户名。

我的 JavaScript 如下:

$( document).ready( function() {
  var $usernameCheck = false;
  var $newPass       = false;
  var $rNewPass      = false;

  $( '#user-name' ).keyup(function() {
    $.get(
        'forgot-compare.php',
        { 
            compare1 : $( '#user-name' ).val(),
            compare2 : $( '#forgotLink').val()
        },
        function(data) {
            if ( data == "1" ) {
                $usernameCheck = true;
                $( '#u-check' ).removeClass().addClass( 'fa fa-check fa-lg check-green' );
            }
            else if (data == "2") {
                $usernameCheck = false;
                $( '#u-check' ).removeClass().addClass( 'fa fa-times fa-lg check-red' );
            }
            submitCheck();
        }
    );

    setTimeout( submitCheck(), 3000);

});

$( '#new-pass' ).keyup( function() {
    var $newPword = $( '#new-pass' ).val().length;

    if ( $newPword >= 10 ) {
        $newPass = true;
        $( '#p-check' ).removeClass().addClass( 'fa fa-check fa-lg check-green' );
    }
    else if ( $newPword == 0 ) {
        $newPass = false;
        $( '#p-check' ).removeClass();
    }
    else if ( $newPword < 10 ) {
        $newPass = false;
        $( '#p-check' ).removeClass().addClass( 'fa fa-times fa-lg check-red' );
    }

    submitCheck();
});

$( '#retype-new-pass' ).keyup( function() {
    var $rNewPword = $( '#retype-new-pass' ).val();

    if ( $rNewPword == $( '#new-pass' ).val() ) {
        $rNewPass = true;
        $( '#r-check' ).removeClass().addClass( 'fa fa-check fa-lg check-green' );
    }
    else if ( $rNewPword != $( '#new-pass' ).val() ) {
        $rNewPass = false;
        $( '#r-check' ).removeClass().addClass( 'fa fa-times fa-lg check-red' );
    }

    submitCheck();
});

var submitCheck = function() {
    if ($usernameCheck === true &&
        $newPass       === true &&
        $rNewPass      === true
       ) {
        $('#pSubmit').removeProp('disabled');
    }
    else if ($usernameCheck === false ||
             $newPass       === false ||
             $rNewPass      === false
            ) {
        $('#pSubmit').prop('disabled', true);
    }
  }
});

用户名正确、新密码至少为 10 个字符，并且重新输入的密码与新密码匹配后，页面上的提交按钮就会启用。否则，提交按钮将被禁用。

我也会把我的 PHP 和 HTML 放在这篇文章中(如果有人愿意，我仍然会这样做)，但我可以通过快速输入用户名来完全复制问题，也可以通过输入来“解决”问题慢慢来。

似乎当用户快速输入用户名时，AJAX 调用会“自行绊倒”，并且对从最后一个按键输入中分配 $usernameCheck 变量的内容感到困惑。我以前在较小规模的项目中遇到过这个问题，但并没有真正关注它。现在这似乎是这个更大项目中的一个问题。

我尝试过的:-setTimeout 在脚本中的各个位置，以延迟运行 SubmitCheck() 函数的时间。没用。-.delay() 在脚本中的不同位置，目的与上面相同。没有成功。

我应该采取什么方法来解决这个问题？这是一个常见问题吗？一般的解决方案是什么？有没有一种方法可以让我在运行函数之前等待查看是否按下了更多按键？ (也许，如果在最后500毫秒内没有按键，则运行JS函数)

Answer 1

考虑一下:我添加了一个检查，以便您在每次按键后等待 0.5 秒(您可以使用此值)。然后，如果用户在这 0.5 秒内按下按钮，您的超时将被重置，从而防止在该时间范围内多次提交。

$( document).ready( function() {
    var $usernameCheck = false;
    var $newPass       = false;
    var $rNewPass      = false;
    var myTimeout = null;

    var checkUsername = function(){
        $.get(
            'forgot-compare.php',
            { 
                compare1 : $( '#user-name' ).val(),
                compare2 : $( '#forgotLink').val()
            },
            function(data) {
                if ( data == "1" ) {
                    $usernameCheck = true;
                    $( '#u-check' ).removeClass().addClass( 'fa fa-check fa-lg check-green' );
                }
                else if (data == "2") {
                    $usernameCheck = false;
                    $( '#u-check' ).removeClass().addClass( 'fa fa-times fa-lg check-red' );
                }
                submitCheck();
            }
        );
    }

    $( '#user-name' ).keyup({
        clearTimeout(myTimeout);
        myTimeout = setTimeout(checkUsername, 500);
    });

});

或者，您应该考虑取消之前的 ajax 请求。这是一种方法:

$( document).ready( function() {
    var $usernameCheck = false;
    var $newPass       = false;
    var $rNewPass      = false;
    var ajaxRequest = null;

    var checkUsername = function(){
        if(ajaxRequest !== null){
            ajaxRequest.abort();
        }
        ajaxRequest = $.get(
            'forgot-compare.php',
            { 
                compare1 : $( '#user-name' ).val(),
                compare2 : $( '#forgotLink').val()
            },
            function(data) {
                if ( data == "1" ) {
                    $usernameCheck = true;
                    $( '#u-check' ).removeClass().addClass( 'fa fa-check fa-lg check-green' );
                }
                else if (data == "2") {
                    $usernameCheck = false;
                    $( '#u-check' ).removeClass().addClass( 'fa fa-times fa-lg check-red' );
                }
                submitCheck();
            }
        ).always(function() {
            ajaxRequest = null;
        });
    }

    $( '#user-name' ).keyup({
        checkUsername();
    });
});

当然，您可以将超时和取消 ajax 请求合并到代码中。