Question

我已经通过SO上的一些示例（包括this one和this one）来尝试解决我遇到的问题。

使用下面的脚本我在页面上添加一个带有“旋转”图像的叠加层，以向用户表明系统在点击按钮后正忙于处理。

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);
    }
}

如果我省略了超时功能

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

click事件已正确绑定到按钮并加载了叠加层。问题是UI可能会卡在叠加显示上（系统渲染页面没有“刷新”或“后退”按钮，因此用户无法重新加载页面。）

但是，添加完整脚本后，似乎onClick事件不再绑定到脚本。

我尝试了setTimeout和delay的各种组合，但没有运气。

任何帮助非常感谢。

Answer 1

超时功能不能很好地构建。

试试这个：

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

文档：

setTimeout("javascript function",milliseconds);

setTimeout（）方法将等待指定的毫秒数，然后执行指定的函数。

setTimeout（）的第一个参数应该是一个函数。

第二个参数表示从现在开始要执行第一个参数的毫秒数。

Answer 2

正如我在评论中所说，代码works just fine.

删除超时</div>后由Javascript添加的<div>

2 个答案: