去掉 <div> 超时后由Javascript添加

Question

I have gone through a number of examples on SO (including this one and this one ) to try and resolve an issue I'm having.

Using the script below I am adding an overlay to the page with a 'spinning' image to indicate to the user that the system is busy processing after they clicked the button.

ACME.global = ACME.global ? ACME.global : {
    init: function() {
        $(".ctaButton").bind("click", this.pageLoadingOverlay);
    },
    pageLoadingOverlay : function(event) {
        var body = document.getElementsByTagName("body");
        var pageOverlay = document.createElement("div");
        pageOverlay.id = "onClickPageOverlay";
        body[0].appendChild(pageOverlay);
        setTimeout(function() {
            $('#onClickPageOverlay').remove();
        }, 1000);
    }
}

If I leave out the timeout functionality

        setTimeout(function() {
            $('#onClickPageOverlay').remove();
        }, 30000);

The click event is properly bound to the button and the overlay is loaded. The problem is that the UI could then get stuck on the overlay display (the system rendering the page does not have a "refresh" or "back" button so the user can't reload the page).

However adding the full script it appears that the onClick event is no longer bound to the script.

I've tried various combinations of setTimeout and delay with no luck.

Any help greatly appreciated.

Answer 1

The timeout function isnt´t well build.

Try this:

var t=setTimeout("$('#onClickPageOverlay').remove()",30000);

Documentation:

setTimeout("javascript function",milliseconds);

The setTimeout() method will wait the specified number of milliseconds, and then execute the specified function.

The first parameter of setTimeout() should be a function.

The second parameter indicates how many milliseconds, from now, you want to execute the first parameter.

Answer 2

正如我已经在评论中指出的那样，该代码可以正常工作。