Question

我有一个Javascript函数，通过替换按钮图像来循环创建闪烁效果。

function blinkit() {
   intrvl = 0;
   for (nTimes = 0; nTimes < 500; nTimes++)  {
      intrvl += 1000;
      t = setTimeout("document.getElementById('imgshowreport').src='report_icon.png';",intrvl);
      intrvl += 1000;
      t = setTimeout("document.getElementById('imgshowreport').src='report_icon2.png';",intrvl);
   }
}

这可以达到目的，但是当点击按钮时我希望闪烁停止。如果不刷新整个页面，我怎么能这样做？

Answer 1

使用break终止循环是没用的，因为在用户点击按钮之前，你的循环已经结束并设置所有超时。

最好使用setInterval一次，而不是排队数百个单独的超时。然后你可以一举杀掉这个间隔。

您还应该不使用字符串代码，而是使用函数：

var myInterval = null;

function blinkit() {
  var i = 0;
  myInterval = setInterval(function() {
     document.getElementById('imgshowreport').src = (i % 2) ? 'report_icon2.png' : 'report_icon.png';
     i++;
  }, 1000);
}

document.getElementById('imgshowreport').onclick = function() {
   if (myInterval != null) {
      clearInterval(myInterval);
      myInterval = null;
      document.getElementById('imgshowreport').src = 'report_icon.png';
   }
};

我没有测试它是否有拼写错误，但基本逻辑是正确的。

Answer 2

您可以使用中断语法

break;

或

nTimes = 500;

Answer 3

尝试休息 http://www.w3schools.com/js/js_break.asp

如何阻止这种闪烁效果？

3 个答案: