javascript - 弹出提示窗口JS怎么设置弹出一次，假设多弹出也要把前者取消，让后者弹出一次？

Question

这个问题可以看到有两次叠加的现象，弹出提示窗口JS怎么设置弹出一次，假设多弹出也要把前者取消，让后者弹出一次？

function prompt(text,bgcolor) {
    var sbid = document.getElementsByTagName("body")[0];
    var newp = document.createElement("p");
    newp.className="dialog";
    newp.className +=" "+bgcolor;
    newp.innerHTML += "<p>"+text+"</p>";
    sbid.appendChild(newp);
    setTimeout(function(){
        sbid.removeChild(newp);
    },4000);
}

Answer 1

每次弹出的时候都清空一下。然后再渲染

var newp;
function prompt(text,bgcolor) {
    if(newp == null){
        var sbid = document.getElementsByTagName("body")[0];
        newp = document.createElement("p");
        newp.className="dialog";
        newp.className +=" "+bgcolor;
        newp.innerHTML += "<p>"+text+"</p>";
        sbid.appendChild(newp);
        setTimeout(function(){
            newp.parentNode.removeChild(newp);
            newp = null;
        },4000);
    }else{
        newp.parentNode.removeChild(newp);
        newp = null;
        prompt(text,bgcolor);
    }
}

Answer 2

弹出弹窗前，先把弹窗内容区域清空，然后再把内容填充进弹窗内容区

Answer 3

给你看看这段代码：

function hello(){      

alert("hello");

}

var id=window.setTimeout(hello,5000);

document.onclick=function(){     

window.clearTimeout(id);

 }

Answer 4

function prompt(text,bgcolor) {
    var sbid = document.getElementsByTagName("body")[0];
    var alert = document.querySelectorAll('.dialog');//得到Dialog列表
    if(alert.length>0){
        sdid.removeChild(alert[0]);
        //如果有多个可以遍历删除
        //但是加了这个，基本上就只有单个了
    }else{
        var newp = document.createElement("p");
        newp.className="dialog";
        newp.className +=" "+bgcolor;
        newp.innerHTML += "<p>"+text+"</p>";
        sbid.appendChild(newp);
        setTimeout(function(){
            sbid.removeChild(newp);
        },4000);
    }
    
}

Answer 5

立个flag.

var flag = true;
if(flag) {
    flag = false;
    prompt(...);
}
function prompt(text,bgcolor) {
    clearTimeout(timer);
    var sbid = document.getElementsByTagName("body")[0];
    var newp = document.createElement("p");
    newp.className="dialog";
    newp.className +=" "+bgcolor;
    newp.innerHTML += "<p>"+text+"</p>";
    sbid.appendChild(newp);
    var timer = setTimeout(function(){
        sbid.removeChild(newp);
        flag = true;   //  在这儿还原flag
    },4000);
}

试试

Answer 6

function prompt(text,bgcolor){

var sbid = document.getElementsByTagName("body")[0];
var newp = document.createElement("p");
newp.className="dialog";
newp.className +=" "+bgcolor;
newp.id="dialog";
newp.innerHTML += "<p>"+text+"</p>";
sbid.appendChild(newp);
if(document.getElementById("dialog")){
    document.getElementById("dialog").onclick = function(){
        this.parentNode.removeChild(document.getElementById("dialog"));
    }
}

}