Javascript 即使条件为'，也执行我的else语句；我在jQuery中没有见过面

嗯，我的标题不可能是真的，因为编程语言不会犯这样的错误，但它正在发生。所以我们可以放心地说，我的逻辑有问题

我有一段jQuery/JS代码，它检查“togo”的字符数，就像在进行AJAX调用之前SO的注释部分一样。所以代码是这样想的：

如果输入中的字符数小于N，则倒计时字符数（例如，2个字符，1个字符…）
否则调用AJAX并在成功时显示结果

当您第一次进入表单时，此过程将顺利进行：

• 你得到的是空字段
• 开始打字
• 字符指示器不断减少
• 我们击中了“断点”，它停止了检查
• AJAX调用已发出
• 我们会在成功回调上显示一条消息

但是，当我继续使用退格（或删除）删除字符并再次进入断点（必须看到“N to go”的地方）时，我会再次显示“N to go”部分，但是AJAX调用也会通过，即使它被包装在

else

中！这很奇怪。结果如下所示：

其中红色文本是AJAX成功回调，黄色部分是字符计数器

这是我的jQuery:

var delay = (function(){
    var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
})();

$('#reg_email').keyup(function(){

    var min_password_chars = 6;
    var email_input = $('#reg_email').val();
    var email_prev  = '';

    if (email_input.length < min_password_chars)
    {
        $('.email-check').text('');

        if ($('.email-check').children('.yellowish').length == 0)
        {
            $('.email-check').append('<span class="yellowish"><span class="counter">6</span> to go</span>');
        }

        $('.email-check .counter').text(min_password_chars - email_input.length);
    }
    else
    {
        delay(function(){
            $.ajax({
                type: 'GET',
                url: 'ajax.php?action=check_email',
                data: { email: JSON.stringify(email_input) },
                success: function(data){
                    var response = $.parseJSON(data);                           
                    $('.email-check').append(response.message);

                    email_prev += response.sent_email;
                }
            });
        }, 1500);

        if (email_input != email_prev)
        {
            $('.email-check').text('');
        }
    }
});

<div class="form-group">
    <label for="rep_email">Repeat email</label>
    <input type="email" class="form-control" id="rep_email" name="email_rep" placeholder="Enter your email" required>
    <p class="email-check pull-right validate-note"><span class="yellowish"><span class="counter">6</span> to go</span></p>
</div>

var delay=（函数（）{
var定时器=0；
返回函数（回调，毫秒）{
清除超时（计时器）；
定时器=设置超时（回调，毫秒）；
};
})();
$（'#reg_email'）.keyup（函数（）{
var min_password_chars=6；
var email_input=$（'#reg_email'）.val（）；
var email_prev=''；
如果（电子邮件输入长度<最小密码字符）
{
$（'.email check'）。文本（''）；
如果（$（'.email check'）。子项（'.yellow'）。长度==0）
{
$（'.email check'）.append（'6 to go'）；
}
$（'.email-check.counter'）.text（最小密码字符-email\u-input.length）；
}
其他的
{
延迟（函数（）{
$.ajax({
键入：“GET”，
url:'ajax.php？action=check_email'，
数据：{email:JSON.stringify（email_输入）}，
成功：功能（数据）{
var响应=$.parseJSON（数据）；
$（'.email check'）.append（response.message）；
email_prev+=response.sent_email；
}
});
}, 1500);
if（email\u input！=email\u prev）
{
$（'.email check'）。文本（''）；
}
}
});

这是HTML:

var delay = (function(){
    var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
})();

$('#reg_email').keyup(function(){

    var min_password_chars = 6;
    var email_input = $('#reg_email').val();
    var email_prev  = '';

    if (email_input.length < min_password_chars)
    {
        $('.email-check').text('');

        if ($('.email-check').children('.yellowish').length == 0)
        {
            $('.email-check').append('<span class="yellowish"><span class="counter">6</span> to go</span>');
        }

        $('.email-check .counter').text(min_password_chars - email_input.length);
    }
    else
    {
        delay(function(){
            $.ajax({
                type: 'GET',
                url: 'ajax.php?action=check_email',
                data: { email: JSON.stringify(email_input) },
                success: function(data){
                    var response = $.parseJSON(data);                           
                    $('.email-check').append(response.message);

                    email_prev += response.sent_email;
                }
            });
        }, 1500);

        if (email_input != email_prev)
        {
            $('.email-check').text('');
        }
    }
});

<div class="form-group">
    <label for="rep_email">Repeat email</label>
    <input type="email" class="form-control" id="rep_email" name="email_rep" placeholder="Enter your email" required>
    <p class="email-check pull-right validate-note"><span class="yellowish"><span class="counter">6</span> to go</span></p>
</div>

重复电子邮件
6个待办事项

---

我可能做错了什么？我的逻辑哪里出了问题？

您的ajax调用是双重异步的，因此这可能会混淆调试和结果。这种类型的东西实际上很难用断点进行调试。我发现我经常必须在代码中放入

console.log（）

语句，以便实时查看事件的实际顺序

else

子句的执行部分在第一次遇到

else

子句之后的某个时间执行，并且由于您的

delay（）

和AJAX调用的异步性质，它被双重延迟。这使得调试变得很困难，如果您没有针对特定情况编写代码，则很容易导致编程错误

首先，它们是异步的，因为您使用的是

delay（）

，我假设它是

setTimeout（）

。这意味着您甚至要等到以后才能启动ajax调用。其次，它们是异步的，因为它们是异步的ajax调用。因此，在执行

else

分支后的某个时间，他们调用成功处理程序。实际上，您可以在其他字符完成执行之前键入它们

您还存在关闭问题，您可能在成功处理程序中使用的数据与最初发送ajax调用时的数据不同（因为自从ajax调用声明后，数据发生了变化）

---

在下面的代码中，我应用了以下修复：

取消任何尚未启动的前一个计时器，以便在键入更多字符时不会让计时器一直运行。这将防止在您准备安排另一个ajax调用时发送ajax调用

始终将最新值发送到服务器，即使自计时器初始设置后已对其进行了修改

如果在设置此计时器后对其进行了修改，并且现在太短，则不要将其发送到服务器，因为该太短错误将已报告

这不会在安排下一个ajax调用时取消任何机上ajax调用，但这只是服务器效率问题，而不是正确性问题。您的代码还假设同时进行的多个ajax调用将按顺序处理和返回。在现实世界中通常是这样，但如果没有编码来专门订购它们，就不能保证这一点

var emailTimeout;
$('#reg_email').keyup(function(){
    var min_password_chars = 6;
    var email_input = $('#reg_email').val();
    var email_prev  = '';

    if (email_input.length < min_password_chars)
    {
        $('.email-check').text('');

        if ($('.email-check').children('.yellowish').length == 0)
        {
            $('.email-check').append('<span class="yellowish"><span class="counter">6</span> to go</span>');
        }

        $('.email-check .counter').text(min_password_chars - email_input.length);
    }
    else
    {
        clearTimeout(emailTimeout);
        emailTimeout = setTimeout(function(){
            // get latest email value, might have changed
            var latest_email_input = $('#reg_email').val();
            // if it's not long enough, don't send to the server
            if (latest_email_input.length < min_password_chars) return;

            $.ajax({
                type: 'GET',
                url: 'ajax.php?action=check_email',
                // always retrieve latest value of data (may have changed)
                data: { email: JSON.stringify(latest_email_input) },   
                success: function(data){
                    var response = $.parseJSON(data);                           
                    $('.email-check').append(response.message);

                    email_prev += response.sent_email;
                }
            });
        }, 1500);

        if (email_input != email_prev)
        {
            $('.email-check').text('');
        }
    }
});

---

您的ajax调用是双重异步的，因此这可能会混淆调试和结果。这种类型的东西实际上很难用断点进行调试。我发现我经常必须在代码中放入

console.log（）

语句，以便实时查看事件的实际顺序

else

子句的执行部分在第一次遇到

else

子句之后的某个时间执行，并且由于您的

delay（）

和AJAX调用的异步性质，它被双重延迟。这使得调试变得很困难，如果您没有针对特定情况编写代码，则很容易导致编程错误

首先，它们是异步的，因为您使用的是

delay（）

，而我使用的是