Using when and done and 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>

What I want to happened is after clicking show will show the red box after 3 seconds the red box will hide then the blue box should show.

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

Although the question is different, the answer here should be what you want: https://stackoverflow.com/a/39538518/2181514 — freedomn-m, Jun 05 '17 at 07:22
Possible duplicate of [using setTimeout on promise chain](https://stackoverflow.com/questions/39538473/using-settimeout-on-promise-chain) — freedomn-m, Jun 05 '17 at 07:22
If I was to take the answer to that question and paste it here, it would be a valid answer to this question. — freedomn-m, Jun 05 '17 at 07:29

Brian · Accepted Answer · 2017-06-05T07:37:25.483

If you wanted to use $.when then you need to pass in a $.Deferred() as an argument. Then resolve the $.Deferred() once the timeout completes which will call the method that we passed to .done() previously.

I also set the initial state of the dialogs via CSS to display: none; to avoid the need for hiding them via JS initially.

I've also provided an alternative which doesn't use jQuery deferred's which achieves the same results.

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>

Glad to be of assistance, I've just updated the answer with a simplified second example that eliminates the need for Deferred :). — Brian, Jun 05 '17 at 07:39

score 0 · Answer 2 · answered Jun 05 '17 at 07:13

Small change to your code..

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>

Question *"use when and done"* answer: comment out when and done... eh? — freedomn-m, Jun 05 '17 at 07:20

score 0 · Answer 3 · answered Jun 05 '17 at 07:35

$.when is taking input parameters, when those resolve, then it will excute the done function. In your case setTimeout function is executed successfully, so it is calling done method instantly without waiting to upto 3sec. To make it work, you need to use Promise concept here.

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>

Using when and done and settimeout show hide div

3 Answers3