使用 when and done 和 settimeout show hide div

Question

function closecustomBox() {
  $('#dialog').hide();
}
$('#dialog').hide();
$('#anotherdialog').hide();
$("#show").click(function() {
  $('#dialog').show();
  $.when(
    setTimeout(function() {
      closecustomBox();
    }, 3000)
  ).done(function(x) {
    $('#anotherdialog').show();
  });
})

#dialog {
  width: 101px;
  height: 101px;
  background-color: red;
}

#anotherdialog {
  width: 100px;
  height: 100px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog"></div>

<div id="anotherdialog"></div>


<div id="show">show</div>

我想要发生的是点击显示后 3 秒后显示红色框，红色框将隐藏然后蓝色框应该显示。

I want to achieve here is to not make the 2 div appear together

Answer 1

对您的代码进行小改动..

function closecustomBox() {
  $('#dialog').hide();
}
$('#dialog').hide();
$('#anotherdialog').hide();
$("#show").click(function() {
  $('#dialog').show();
  //$.when(
    setTimeout(function() {
      closecustomBox();
      $('#anotherdialog').show();
    }, 3000)
  /*).done(function(x) {
    $('#anotherdialog').show();
  });*/
})

#dialog {
  width: 101px;
  height: 101px;
  background-color: red;
}

#anotherdialog {
  width: 100px;
  height: 100px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog"></div>

<div id="anotherdialog"></div>


<div id="show">show</div>

Answer 2

如果你想使用 $.when 那么你需要传入一个 $.Deferred() 作为参数。然后在超时完成后解析 $.Deferred()，这将调用我们之前传递给 .done() 的方法。

我还通过 CSS 将对话框的初始状态设置为 display: none; 以避免最初通过 JS 隐藏它们的需要。

我还提供了一个不使用 jQuery 延迟的替代方案，它实现了相同的结果。

function closecustomBox() {
  $('#dialog').hide();
}

var dialog = $('#dialog');
var anotherDialog = $('#anotherdialog');
var timeout;

$("#show").click(function() {
  dialog.show();
  anotherDialog.hide();

  def = $.Deferred();
  $.when(def).done(function() {
    closecustomBox();
    anotherDialog.show();
  });

  if (timeout) clearTimeout(timeout); // Clear out any old timeouts to avoid flickers and strange behavior
  timeout = setTimeout(function() {
    def.resolve(); // Resolve the Deferred which will call def.done's callback
  }, 3000);
})

// Or if you don't want to use promises you can just elminate them entirely and simplify this example greatly
var timeout2;
 $("#show-2").click(function() {
      dialog.show();
      anotherDialog.hide();

      if (timeout) clearTimeout(timeout); // Clear out any old timeouts to avoid flickers and strange behavior
      timeout = setTimeout(function() {
        closecustomBox();
        anotherDialog.show();
      }, 3000);
    })

#anotherdialog {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: none;
}

#dialog {
  width: 101px;
  height: 101px;
  background-color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dialog"></div>

<div id="anotherdialog"></div>


<div id="show">show</div>

<div id="show-2">Alternate Show</div>

Answer 3

$.when是接受输入参数，当这些参数解析后，就会执行done函数。在您的情况下 setTimeout 函数已成功执行，因此它会立即调用 done 方法而无需等待 3sec。为了让它工作，你需要在这里使用 Promise 概念。

function closecustomBox() {
  $('#dialog').hide();
}
$('#dialog').hide();
$('#anotherdialog').hide();
$("#show").click(function() {
  $('#dialog').show();
  var $def = $.Deferred();
  $.when(
    $def
  ).done(function(x) {
    $('#anotherdialog').show();
  });
  setTimeout(function() {
    closecustomBox();
    $def.resolve(true);
  }, 3000);
})

#dialog {
  width: 101px;
  height: 101px;
  background-color: red;
}

#anotherdialog {
  width: 100px;
  height: 100px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog"></div>

<div id="anotherdialog"></div>


<div id="show">show</div>

使用 when and done 和 settimeout show hide div

Using when and done and settimeout show hide div

jquery

settimeout

show-hide