javascript-将按钮单击的处理推迟到页面加载后

Question

I am using Magento and have encountered issues where clicking on the "Add to Cart" button before the page has fully loaded results in inconsistent behaviour.

What I would like to do is defer the handler for the button click until after the page loads. I was thinking of changing the text of the button to "Adding to cart" so the user knows his click has been registered.

What is the best way to defer the handler?

I guess I could register a variable on the click, and then check that variable with a $jQuery.ready() function, but is there a way do that all within the existing handler. Adding an additional code block may not be so easy given how the blocks work in Magento.

Answer 1

is there a way do this within the existing [click event] handler

When you make a call to the jquery document ready, it will run when the document is ready - however, if you call this after the document is ready, then the callback will be made immediately.

So you can change your event handler to:

$(document).on("click", "#mybutton", function() {
    var btn = $(this);
    btn.text("loading...");
    $(function() {
        btn.text("processing...");
        // process button here, example:
        btn.closest("form").submit();
    });
});

If you click the button before the doc is ready, the click event handler's inner doc ready will queue and run when the doc is ready.

If you click the button after the doc is ready, the click event handler's inner doc ready will run immediately.