l'aide quand et fait et 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>

Ce que je veux arrivé est après avoir cliqué sur show affichera la boîte rouge après 3 secondes, la boîte rouge cachera alors la boîte bleue devrait montrer.

Je veux réaliser ici est de ne pas faire les 2 div apparaissent ensemble

Answer 1

Si vous vouliez utilisez $.when puis vous devez passer un $.Deferred() comme argument. Puis résolvez le $.Deferred() une fois le délai écoulé, ce qui appellera la méthode que nous avons passée à .done() précédemment.

Je définis également l'état initial des boîtes de dialogue via CSS à display: none; pour éviter d'avoir à les masquer initialement via JS.

J'ai également fourni une alternative qui n'utilise pas jQuery deferred qui obtient les mêmes résultats.

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 2

Petit changement à votre 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>

Answer 3

$.when prend des paramètres d'entrée, lorsque les résoudre, alors il excute la fonction done. Dans votre cas setTimeout fonction est exécutée avec succès, de sorte qu'il appelle done méthode instantanément sans attendre jusqu'à 3sec. Pour le faire fonctionner, vous devez utiliser le concept Promise ici.

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>