Javascript 用 setTimeouts 闪烁答案

【问题标题】：Javascript blinking with setTimeoutsJavascript 用 setTimeouts 闪烁
【发布时间】：2014-11-26 16:40:44
【问题描述】：

您好，我遇到了每 0.5 秒闪烁一次的问题。我以 #blink display="inline" 开始我的代码，但它始终保持内联。启动我的代码时，我调用 startBlinking。

    function startBlinking() {
    setInterval(function () { 
        blink();
    }, 1000);
}

function blink() {
    setTimeout(function () {
        document.getElementById('blink').style.display = "none";
    }, 500);
    setTimeout(function () {
        document.getElementById('blink').style.display = "inline";
    }, 500);
}

你能帮帮我吗？谢谢。

【问题讨论】：

<blink></blink> 有一个标签！
此标签已被 AFAIK 弃用。
@adeneo - 我真的应该扇你一巴掌
您也可以严格使用 css 来执行此操作。 stackoverflow.com/a/16012979/2011623
@j08691 - youtube.com/watch?v=7O6Rm4qNILA

标签： javascript jquery html css

【解决方案1】：

你可以通过切换一个类来让它变得简单

.hide{
   display:none;
}

setInterval(function () { 
    $('.blink').toggleClass('hide')
}, 500);

JS Fiddle

【讨论】：

【解决方案2】：

只需调用一次，setTimeout() 会将其从线程中取出，因此它会立即设置回 inline。

function blink() {
    setTimeout(function () {
        if (document.getElementById('blink').style.display === 'inline') {
            document.getElementById('blink').style.display = "none";
        } else {
            document.getElementById('blink').style.display = "inline";
        }
    }, 500);
}

【讨论】：

【解决方案3】：

你搞砸了javascript的事件队列，你为什么不试试这个

function startBlinking() {
  initial = 'inline';
  index = 0;
setInterval(function () { 
    if(index==2){
     initial = (initial=='none')?'block':'none';
    document.getElementById('blink').style.display = initial;
    index=0;
     }

index++;
}, 1000);
 }

【讨论】：

【解决方案4】：

您尝试的问题是您为隐藏和显示元素设置了相同的超时长度，这意味着它将同时隐藏和显示！删除一个，它应该可以工作：

function startBlinking() {
  setInterval(function () { 
    blink();
  }, 1000);
}
function blink() {
  // note no timeout for the hiding part
  document.getElementById('blink').style.display = "none";
  setTimeout(function () {
    document.getElementById('blink').style.display = "inline";
  }, 500);
}

startBlinking();

<div id="blink">blink</div>
<p>some text following</p>

如您所知，这会导致以下内容跳转。每次我们隐藏或显示它时，我们也会获取元素。最好换成visibility，让函数更灵活一点：

function blink(element, time) {
  // using visibility: hidden; instead of display: none;
  // allows the element to keep its rendering space
  element.style.visibility = "hidden";
  setTimeout(function () {
    element.style.visibility = "visible";
  }, time);
  setTimeout(function () {
    blink(element, time); // recurse
  }, time * 2);
}

// query the DOM for element once instead of every iteration
blink(document.getElementById("blink"), 500);

<div id="blink">blink</div>
<p>following content stays put</p>

您可能还希望能够在某个时候停止闪烁

function blink(element, time) {
  function loop(){
    element.style.visibility = "hidden";
    setTimeout(function () {
      element.style.visibility = "visible";
    }, time);
    timer = setTimeout(function () {
      loop();
    }, time * 2);
    cleared = false;
  }

  var timer, cleared = true;

  // expose methods
  return {
    start: function() {
      if (cleared) loop();
    },
    stop: function() {
      clearTimeout(timer);
      cleared = true;
    }
  };
}

var blinking = blink(document.getElementById("blink"), 500);

document.getElementById("start").addEventListener("click", function(){
  blinking.start();
});
document.getElementById("stop").addEventListener("click", function(){
  blinking.stop();
});

<div id="blink">blink div</div>
<button id="start">start blinking</button><br />
<button id="stop">stop blinking</button>

【讨论】：

【解决方案5】：

对于 jQuery 粉丝：

你可以使用“脉动”效果

http://jqueryui.com/effect/

这可能会或可能不会达到您需要的确切闪烁，但它要简单得多！

【讨论】：