闪烁的文字问题

Question

我有一个脚本，可以使文本在特定颜色和灰色之间交替。它在两种颜色之间每隔一秒闪烁一次。我的代码是：

HTML位

<script>
  setInterval(function() {
    flashtext('flashingtext','<? echo $name_color ?>');
     }, 500 );
   </script>

<span id="flashingtext" style="color: <? echo $name_color ?>"><? echo $name ?></span>

的JavaScript

function flashtext(ele,col) {
var tmpColCheck = document.getElementById( ele ).style.color;
   if (tmpColCheck === 'gray') {
      document.getElementById( ele ).style.color = col;
      } else {
      document.getElementById( ele ).style.color = 'gray';
      }
   } 

我遇到的问题是运行HTML的页面部分每10秒刷新一次。这导致眨眼的时间混乱。它会像我每秒钟说的那样开始闪烁，然后当页面部分刷新时，它会快速闪烁并继续，除非再次手动刷新整个页面。

知道怎么制止这个吗？图中的计时器没有重置或者什么东西......或者当它抓住当前的颜色时它会抓住灰色？不确定：s

Answer 1

由于您不断添加计时器，因此速度越来越快。因此，添加一个检查以确定它是否已定义并取消它。

<script>
    if (typeof flashTimer !== "undefined") {
       window.clearTimeout(flashTimer);
    }
    flashTimer = setInterval( function() {
        flashtext('flashingtext','<? echo $name_color ?>');
     }, 500 );
</script>

Answer 2

通过时间同步，我的意思是为动画使用服务器时间：

this.onload = function(){
        var ts0 = <?=round(microtime(true)*1000);?>;
        var dt = new Date()-ts0;
        var blink = function(){
            console.log(Math.ceil((new Date()-dt)/1000)%2);
            requestAnimationFrame(blink);
        }
        blink();
    }

这样，只要你刷新页面，闪烁就会保持一致。