闪烁并设置超时

Question

我正在为Free Code Camp编写游戏，我需要眨眼几次。

这是我找到的解决方案，但看起来很丑：

function blinkTheCount(symbol) {

    document.getElementById('count').innerHTML = '';

    setTimeout(function() {
        document.getElementById('count').innerHTML = symbol;
        setTimeout(function() {
            document.getElementById('count').innerHTML = '';
            setTimeout(function() {
                document.getElementById('count').innerHTML = symbol;
                setTimeout(function() {
                    document.getElementById('count').innerHTML = '';
                    setTimeout(function() {
                        document.getElementById('count').innerHTML = symbol;
                    }, 200);
                }, 200);
            }, 200);
        }, 200);
    }, 200);

}

您能给我一些帮助，以更时尚的方式编写它吗？

我尝试使用for循环，但进入页面挂起状态。

给你加油

Answer 1

感谢大家，现在是：

function blinkTheCount(symbol) {

    var count = 0;
    var blinkIt = setInterval(function () {
        if (count++ === 5) {
            clearInterval(blinkIt);
        }
        if (document.getElementById('count').innerHTML !== symbol) {
            document.getElementById('count').innerHTML = symbol;
        } else {
            document.getElementById('count').innerHTML = '';
        }
    }, 200);

}

祝你今天愉快！

Answer 2

在这种情况下， setInterval可能是您想要使用的。

如果您不需要清空容器的内容，则可以尝试在display：block和display：none之间切换同一元素。 只需每次检查容器的显示状态并进行相应更新。

 var count = document.getElementById('count'); setInterval(function() { count.style.display = count.style.display == 'none' ? 'block' : 'none'; }, 500); 

 <div id="count">3</div> 

Answer 3

我将在这里使用setTimeout而不是setInterval ，不是因为这是最好的选择，而是为了向OP展示他如何使用setInterval控制眨眼次数：

var max = 10, i = 0;
var myvalues = ["test", "TEST"];
(function loop(){
   if(i++ > max) return;
   var index = i%2;
   setTimeout(function(){
       document.getElementById('count').innerHTML = myvalues[index];
       loop();
   }, 200)
}());

这是小提琴： https : //jsfiddle.net/gerardofurtado/joypdg6g/