时间戳

首页 > 解决方案 > jQuery：window.timer 对多个元素使用 setTimeout 和 setInterval 时出现问题

jquery - jQuery：window.timer 对多个元素使用 setTimeout 和 setInterval 时出现问题

问题描述

我有多个函数使用窗口定时器来创建动画和事件，但是一旦我添加了多个函数，这些操作就不会像我猜的那样运行，因为 window.timer 重叠

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
      viewBox="0 0 200 200" preserveAspectRatio="none" class="circle_svg">

      <circle cx="100" cy="100" r="80" id="green-halo" fill="none" stroke="#00CC33" stroke-width="23"
        stroke-dasharray="0,20000" transform="rotate(-95,100,100)" />

    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
      viewBox="0 0 200 200" preserveAspectRatio="none" class="circle_svg2">

      <circle cx="100" cy="100" r="80" id="green-halo2" fill="none" stroke="#00CC33" stroke-width="3"
        stroke-dasharray="0,20000" transform="rotate(-95,100,100)" />

    </svg>


setTimeout(drawCircle, 1500);
setTimeout(drawCircle2, 1500);

function drawCircle() {
 var circle = document.getElementById('green-halo');
 var interval = 30;
 var angle = 0;
 var angle_increment = 6;
 var max_angle = 384;

 window.timer = window.setInterval(function () {
   circle.setAttribute("stroke-dasharray", angle + ", 20000");
   circle.setAttribute("stroke", "rgb(255, 255, 255)");

   if (angle >= max_angle) {
     window.clearInterval(window.timer);
   }
   angle += angle_increment;
 }.bind(this), interval);
 setTimeout(removeCirclePartAnimation, 2200);
}

function drawCircle2() {
  var circle1 = document.getElementById('green-halo2');
  var interval1 = 30;
  var angle1 = 0;
  var angle_increment1 = 6;
  var max_angle1 = 384;

  window.timer = window.setInterval(function () {
  circle1.setAttribute("stroke-dasharray", angle1 + ", 20000");
  circle1.setAttribute("stroke", "rgb(255, 255, 255)");

  if (angle1 >= max_angle1) {
    window.clearInterval(window.timer);
  }
  angle1 += angle_increment1;
}.bind(this), interval1);

}

我有像这个一样的另一个功能，但是一旦我添加它，它们的行为就会不正常。一旦我禁用了第二个，第一个 setTimeout 就可以很好地处理动画和动作。我该如何解决这个问题？提前致谢。

标签： jquerytimersettimeoutsetinterval

解决方案

设置 awindow.variable与创建全局变量相同，换句话说：

function AFunction() {
    window.timer = 123;
}

是相同的

<script>
    var timer = 123;
</script>

（添加脚本标签以显示它不在另一个函数中）

因此，将 window.timer 用于两个不同的计时器意味着您正在重用同一个变量并且它们相互冲突：

var timer;

timer = setInterval(...
timer = setInterval(...

clearInterval(timer);
clearInterval(timer);

只会清除第二个计时器，因为第一个计时器已丢失/覆盖。

简单的解决方案是使用两个不同的变量：

var timer1, timer2;

timer1 = setInterval(...
timer2 = setInterval(...

clearInterval(timer1);
clearInterval(timer2);

将清除两个计时器。

另一种方法是使用let 

function drawCircle() {
    let timer = window.setInterval(function () {
        ...

    if (angle >= max_angle) {
        window.clearInterval(timer);
    }

这将限制timerdrawCircle内部命名的变量，因此您在drawCircle2中重用名称“timer”，它将是一个不同的变量。

推荐阅读