如果div为空，则在显示按钮之前延迟...不工作

Question

这是我尝试做的事情......检查特定的div是否为空。如果它是空的，则立即附加一个加载微调器（.gif）...然后等待3秒并附加一个按钮，让您报告问题，因为div的实际内容没有加载：

if( $('#this_div').is(':empty') ) {
$('#this_div').append( '<img src="../images/ajax-loader.gif">' );

$('#this_div').delay(3000).append( '<button id="report_button" type="button" class="btn btn-info"><span style="font-size 16px;">Click to Report</span></button>' );
}

我知道empty部分正在运行，因为加载gif显示正常，所以我的if语句没问题。但是，按钮会在加载gif后立即显示，而不是等待3秒。

我在这里做错了什么？

Answer 1

您需要将延迟与队列功能一起使用：

if( $('#this_div').is(':empty') ) {
  $('#this_div').append( '<img src="../images/ajax-loader.gif">');
  $('#this_div').delay(3000).queue(function (next) {
    $(this).append('<button id="report_button" type="button" class="btn btn-info"/>');
    next();
  });
}