javascript - 我的 jQuery ajax if/else on click 不起作用

Question

所以我已经被这个问题困扰了很长一段时间。基本上我有一个按钮(#action)位于index.html 中。我有第二页:number.html。我正在尝试从 index.html 获取 .success 内容或从 number.html 获取 .failure 内容，具体取决于是否在 2 秒内单击了 #action。

这是代码:

$(function() {

    var ajaxRetrieve = function(callback) {
        $.ajax({
            url: 'number.html',
            method: 'POST',
            success: function(responseData) {
                callback(responseData);
            },
            error: function(responseData) {
                alert('Check yourself');
            }
        });
    }

    var flag = 0;

    $('#action').on('click', function() {
        flag = 1;
    });

    if (flag == 1) {
        ajaxRetrieve(function(data) {
            $('.receiver').html($(data).find('.success'));
        });
    } else {
        setTimeout(function() {
            ajaxRetrieve(function(data) {
                $('.receiver').html($(data).find('.failure'));
            });
        }, 3000);
    };


});

问题:单击时，我从未获得 .success 内容，并且没有错误消息。但 2 秒后，.failure 实际上出现了。我尝试了多种方法让它发挥作用，但没有成功。我还检查了点击警告框时标志值是否发生变化，结果是

Answer 1

您需要在 on click 函数中包含 ajax 调用，否则 if 逻辑只会在页面加载时调用，而不会再次调用。

$(function() {

    var ajaxRetrieve = function(callback) {
        $.ajax({
            url: 'number.html',
            method: 'POST',
            success: function(responseData) {
                callback(responseData);
            },
            error: function(responseData) {
                alert('Check yourself');
            }
        });
    }

    var flag = 0;

    $('#action').on('click', function() {
        flag = 1;
        flagCheck();
    });

    var flagCheck = function() {
        if (flag == 1) {
            ajaxRetrieve(function(data) {
                $('.receiver').html($(data).find('.success'));
            });
        } else {
            setTimeout(function() {
                ajaxRetrieve(function(data) {
                    $('.receiver').html($(data).find('.failure'));
                });
            }, 3000);
        };
    }

});