javascript - Javascript，Html：点击完成后执行的函数

Question

我有一个锚标签，如：

<a href="#actions" data-toggle="tab">Actions</a>

anchor上面的标签有一个点击功能：

$('a[href="#actions"]').off('click').on('click', function (e) {
    show_overlay_loading($("body"), "Loading actions tab...");
    // some stuff runs (takes about 5 secs)
    remove_overlay_loading();
});

如您所见，上述功能大约需要 5 秒才能完成。所以，我show_overlay_loading在 click 函数的开头调用了这个函数。它为主体添加了一个加载微调器。

其余代码完成后，我通过调用remove_overlay_loading底部的 click 函数删除了微调器。

两个函数如下：

var show_overlay_loading = function(element, helper_text){
    var overlay_div = document.createElement("div");
    overlay_div.className = "overlay-div-cont";
    var overlay_html = `
        <div class="overlay-img-cont">
            <img src="ajax-loader.gif" class="overlay_image_gif">
            <span class="overlay_helper_text">${helper_text}</span>
        </div>
    `
            `
    overlay_div.innerHTML = overlay_html;
    element.append(overlay_div);
}

var remove_overlay_loading = function(element){
    $(".overlay-div-cont").remove();  
}

如您所见，该show_overlay_loading函数创建了一个覆盖 div 并将其附加到传递的元素（在本例中为 body），然后remove_overlay_loading简单地删除了 div。

问题是，当我单击时，微调器没有添加到正文中。但是当我调试时，它会被添加。

可能的原因：微调器没有被添加，因为虽然函数正在运行，但它会在一段时间后附加元素。但是到那时，我们通过调用来移除微调器remove_overlay_loading。（这只是我的观点，如果它是正确的。）

我通过将其修改为以下内容来达到上述原因remove_overlay_loading：

var remove_overlay_loading = function(element){
    setTimeout(function(){
        $(".overlay-div-cont").remove();
    }, 10000)
}

修改remove_overlay_loading为上述后，显示微调器，但完成完整单击功能后。旋转器在timeout.

注意：show_overlay_spinnerandremove_overlay_spinner在整个代码中只被调用一次，并且在 click 函数中。

注意：它可以在 Firefox 中运行，但不能在 chrome 中运行

标签： javascripthtmljqueryecmascript-6settimeout