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

此版本应该对您有所帮助。我坚持使用vanilla Javascript而不是引入jQuery：

Fiddle

var blink = window.setInterval(blinker1, 900)

function blinker1() {
  var addMoney = document.getElementById("addMoney");

  addMoney.innerHTML = " ";
  setTimeout(function(){addMoney.innerHTML = "ADD MONEY"}, 300);
}

document.getElementById('stop').addEventListener('click', function(){
    clearInterval(blink);
})

注意 - 实现眨眼效果using pure CSS会更好更容易。

Answer 2

按钮中没有文字。有谁知道为什么？

只要在cease1()仍然安排setTimeout("document.getElementById('AddMoney').value=' '",500)时调用blinker1()，就会发生这种情况，这种情况平均每三次发生一次。在这种情况下，取消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";
}

或者，使用两个相互调度的函数，以便一次只激活一个计时器：

{{1}}

Answer 3

文本消失，因为您只在xxxx上设置了clearTimeout，因此setTimeout("document.getElementById('AddMoney').value=' '", 500);的超时将始终执行。我认为这就是按钮中没有文字的原因。

我的方法是设置一个计数器，假设文本需要闪烁10次（根据你的代码需要15秒。）每次显示计数器的文本将减少直到达到0。

示例代码（https://jsfiddle.net/2trodftu/1/）

    //counter
    var blinkCounter = 10;

    // blink method
    function blink() {
        document.getElementById("AddMoney").value="Add Money";

        if (blinkCounter > 0) {
            setTimeout("document.getElementById('AddMoney').value='                   '", 500);
            setTimeout(blink,1500);
        }

        blinkCounter = blinkCounter - 1;
    }

    //initializer
    blink();

希望这有帮助。

按钮

3 个答案: