javascript - 为什么我的 AJAX 运行了 4 次

Question

http://i.imgur.com/eFjV8Uv.png

$("#login").on('click', function () {
    $(".login .col2, .login .signin, .login .close").fadeOut(500, function () {
        $(".login .spinner").fadeIn(500);
        var username = $("#username").val();
        var password = $("#pw").val();
        var data = "username="+username+"&password="+password;
        $.ajax({
            url: './api/prijava',
            method: 'POST',
            data: data,
            dataType: 'json',
            success: function(data) {
                if(data.odg == 1) {
                    $(".login .spinner").fadeOut(500, function() {
                        $(".login .msg").append('Prijava uspješna').fadeIn(500, function() {
                            window.location = "./";
                        });
                    });
                } else if(data.odg == 2) {
                    $(".login .msg").css('background-color', 'rgba(0, 255, 0, 0.5)').append('<span>Prijava uspješna! Dobrodošli...</span>').fadeIn(500, function() {
                        window.location = "./?first=true";
                    }); 
                }
            }, 
            error: function(err) {
                console.log(err);
            }
        });
    });
});

屏幕截图显示成功登录(本地语言)，但它应该显示一次，而不是 4 次。我怎样才能让它加载一次，仅此而已？

Answer 1

fadeOut 的回调将针对每个选定元素运行一次。相反，您可以使用 promise 来解决它只运行一次的问题:

$(selector).fadeOut(500).promise().then(function () {
    // do ajax call here
});