延迟jQuery中的动作

Question

I have a function that will be processing the checkout for an order on my website. Right now I haven't added in any of the ajax and what not but I'm trying to make a type of "loading screen" using javascript and bootstraps modal. This is what I have:

Javascript

function printCheckout() {
    // Show the progress Modal
    $('#myModal').modal({
        keyboard: false,
        backdrop: 'static',
    });
    $('#myModal').modal('show');
    // Billing Information
    $(".stepText").delay(800).html('Processing Billing Information');
    // I want this ^ to delay the process and make it seem longer.
    var name = $("input[name='bill_name']").val();
    var address = $("input[name='bill_address_1']").val() + $(
        "input[name='bill_address_2']").val();
    var city = $("input[name='bill_city']").val();
    var state = $("input[name='bill_state']").val();
    var zip = $("input[name='bill_zip']").val();
    var email = $("input[name='bill_email']").val();
    var phone = $("input[name='bill_phone']").val();
    var billing = 'name=' + name + '&address=' + address + '&city=' + city +
        '&state=' + state + '&zip=' + zip + '&email=' + email + '&phone=' +
        phone;
    // Shipping Informaiton
    $(".stepText").delay(800).html('Processing Shipping Information');
    var name = $("input[name='ship_name']").val();
    var address = $("input[name='ship_address_1']").val() + $(
        "input[name='ship_address_2']").val();
    var city = $("input[name='ship_city']").val();
    var state = $("input[name='ship_state']").val();
    var zip = $("input[name='ship_zip']").val();
    var email = $("input[name='ship_email']").val();
    var phone = $("input[name='ship_phone']").val();
    var shipping = 'name=' + name + '&address=' + address + '&city=' + city +
        '&state=' + state + '&zip=' + zip + '&email=' + email + '&phone=' +
        phone;
    // Payment Information
    $(".stepText").delay(800).html('Processing Payment Information');
    var number = $("input[name='number']").val();
    var expiry_month = $("input[name='expiry_month']").val();
    var expiry_year = $("input[name='expiry_year']").val();
    var cvv = $("input[name='cvv']").val();
    var payment = 'number=' + number + '&expiry_month=' + expiry_month +
        '&expiry_year=' + expiry_year + '&cvv=' + cvv;
    return false;
}

I want the modal to show some text like shown above based on what step we are on.

Processing Billing Information
Processing Shipping Information
Processing Payment Information

I want this to be delayed because right now as soon as the modal opens it is already on the last step which is the payment statement above.

I hope my question makes sense! Thanks for the help.

Answer 1

The simpliest way is to use a timeout

https://developer.mozilla.org/fr/docs/Web/API/Window.setTimeout

setTimeout(function(){ ... }, delayModal) // delayModal integer in ms

If you are using Bootstrap 3

events are namespaces and the show event for modal is show.bs.modal

See http://getbootstrap.com/javascript/#js-events for more details

Your code should be like this :

$('#myModal').on('show.bs.modal', function (e) {
     // your script
})

Demo:

http://jsfiddle.net/5960g3xt/1/ <= How you should do

http://jsfiddle.net/5960g3xt/2/ <= I have added some delay on the second so you can see the change