javascript - 按钮中的闪烁文本

Question

我有这个功能可以在按钮“AddMoney”中闪烁文本:-

 function blinker1(){
    document.getElementById("AddMoney").value="Add Money";
    setTimeout("document.getElementById('AddMoney').value='                   '", 500);
    xxxx = setTimeout("blinker1()",1500);
                     }

然后我停止它并使用此函数设置文本:-

    function cease1() {   
            clearTimeout(xxxx);
            document.getElementById("AddMoney").value="Add Money";
                      }

它可以工作，但有时按钮中没有文本。任何人都知道为什么以及如何解决。

Answer 1

Now and again there is no text in the button. Anyone Know why?

每当 cease1() 被调用而 setTimeout("document.getElementById('AddMoney').value=' '",500) 仍被安排时，它就会发生，平均每三次发生一次。在这种情况下，blinker1() 超时被取消并显示内容，但不久之后它将再次隐藏。

… and how to fix?

您必须取消两个超时:

var timerA, timerB;
function blinker() {
    document.getElementById("AddMoney").value = "Add Money";
    timerA = setTimeout(function() {
        document.getElementById('AddMoney').value = "";
    }, 500);
    timerB = setTimeout(blinker1, 1500);
}
function cease1() {   
    clearTimeout(timerA);
    clearTimeout(timerB);
    document.getElementById("AddMoney").value = "Add Money";
}

或者，使用两个相互调度的函数，以便一次只有一个计时器处于事件状态:

var timer;
function blinkerA() {
    document.getElementById("AddMoney").value = "Add Money";
    timer = setTimeout(blinkerB, 500);
}
function blinkerB() {
    document.getElementById('AddMoney').value = "";
    timer = setTimeout(blinkerA, 1000);
}
function cease1() {   
    clearTimeout(timer);
    document.getElementById("AddMoney").value = "Add Money";
}