延迟执行 jQuery/javascript 函数，直到满足特定条件答案

【问题标题】：delay execution of a jQuery/javascript function until certain condition is met延迟执行 jQuery/javascript 函数，直到满足特定条件
【发布时间】：2021-06-10 22:33:12
【问题描述】：

我正在开发一个网页，当用户单击按钮时会显示扑克牌。单击按钮时，页面上的图像淡出，然后向服务器发出 jquery ajax 请求以获取随机扑克牌，然后新图像淡入。所有这些在我的本地服务器上都没有问题，但是现在这个项目正在另一台服务器上进行测试，图像淡出，然后在卡片图像插入到破坏效果的页面之前开始淡入。我对 javascript 不是很了解，但我试图摆弄 fadeOut-fadeIn 时间来了解是否有用。谁能帮助我理解为什么会发生这种情况并指导我如何解决它？如何让图像淡入淡出，然后等到发出请求后再淡入图像。下面是我用来执行此过程的函数。

$('.cardButton').on('click', function() {
var card = $(this).attr('cardSelector')
    req = $.ajax({
        url: '/wager', 
        type: 'GET',
        data: 'json',
        success: function(response){
            console.log(response);
        },
    });
    req.done(function(data) {
        $('#displayCard').fadeOut(1000, function() {
            $('#displayCard').attr('src', data.playingCard)
        });
        $('#displayCard').fadeIn(4000);
    });

});

【问题讨论】：

您的描述和您的代码不匹配。在代码中，您在解决 Ajax 请求后将图像淡出，而不是在单击按钮后。是哪个？

标签： javascript jquery ajax web

【解决方案1】：

您已正确地将淡入淡出代码放入done 回调中，因此实际上该请求在您的代码开始淡入淡出之前已经收到了响应。

但是这里还有另一个异步过程：图像的加载也会发生异步，所以当你设置src属性时，执行将立即继续淡入，而不是等待图像加载已加载完毕。

您可以使用图像的load 事件来考虑此延迟。分配一次处理程序，使用.one():

$('#displayCard').one("load", () => $('#displayCard').fadeIn(4000));
$('#displayCard').fadeOut(1000, function() {
    $('#displayCard').attr('src', data.playingCard);
});

【讨论】：