按钮中的闪烁文本答案

【问题标题】：Blinking text in a button按钮中的闪烁文本
【发布时间】：2017-07-02 05:04:07
【问题描述】：

我有这个功能可以让按钮“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";
                      }

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

【问题讨论】：

尽量把xxxx放在函数外面
xxxx 是一个全局变量，如果这就是你的意思的话。
你什么时候完全丢失了按钮文本
按钮文本闪烁，当我调用停止1时，闪烁停止并且文本出现在按钮中。按钮中时不时地没有文字。停止 1 调用后的警报显示文本始终已设置，但有时它不会显示在按钮中。
我不明白时不时的意思。你确定文本没有被剪裁

标签： javascript

【解决方案1】：

按钮中有时没有文字。有人知道为什么吗？

每当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";
}

【讨论】：

【解决方案2】：

这个版本应该更适合你。我坚持使用 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。

【讨论】：

您应该使用clearInterval 而不是clearTimeout，即使两者都有效。
好收获。更新了！

【解决方案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();

希望这会有所帮助。

【讨论】：