Javascript setInterval在另一个setInterval中随时间加速

我花了很长时间试图弄清楚如何使用带有CSS风格的函数的Google Maps API在多段线上设置符号动画。我把这件事做好了。现在，我正在尝试每隔5秒运行一次

setInterval（myFunc，10）

。以下是相关的代码片段：

function animateCircle(line) {
    var count = 0;
    let refreshRate = 10;
    let countFunc = EasingFunctions.easeInOutCubic;
    let perc = 0

    function moveCircle() {
      count = count < 1 ? (count + 0.005) : 0;

      perc = countFunc(count) * 100 <= 100 ? countFunc(count) * 100 :  countFunc(count) * 100 - 100
      perc = perc >= 0 ? perc : 100 + perc
      perc === 0 ? window.clearInterval(moveCircInterval) : ''
      // console.log(count + " // " + perc)

      var icons = line.get('icons');
      icons[0].offset = perc + '%';

      line.set('icons', icons);
    }

    var moveCircInterval = window.setInterval(moveCircle, refreshRate);

    window.setInterval(() => moveCircInterval = window.setInterval(moveCircle, refreshRate), 5000)
  }

函数animateCircle（行）{
var计数=0；
让刷新率=10；
设countFunc=EasingFunctions.easeInOutCubic；
设perc=0
函数moveCircle（）{
计数=计数<1？（计数+0.005）：0；
perc=countFunc（计数）*100=0？perc:100+perc
perc==0？窗口清除间隔（moveCircInterval）：“”
//console.log（计数+“/”+perc）
var icons=line.get（'icons'）；
图标[0]。偏移量=perc+'%'；
行。设置（'图标'，图标）；
}
var moveCircInterval=window.setInterval（moveCircle，refreshRate）；
window.setInterval（（）=>moveCircInterval=window.setInterval（moveCircle，刷新率），5000）
}

还有一个

---

这段代码不是很好，但几乎可以正常工作。在我这方面，它会随着时间的推移而加速，尤其是如果您离开选项卡返回。

如果我正确理解您的担忧，我们可以调整您的代码，如下所示：

function animateCircle(line) {
    var count = 0;
    let refreshRate = 10;
    let countFunc = EasingFunctions.easeInOutCubic;
    let perc = 0

    function moveCircle() {
      count = count < 1 ? (count + 0.005) : 0;

      perc = countFunc(count) * 100 <= 100 ? countFunc(count) * 100 :  countFunc(count) * 100 - 100
      perc = perc >= 0 ? perc : 100 + perc
      if (perc === 0) {
        clearInterval(moveCircInterval);
        setTimeout(() => {
            moveCircInterval = setInterval(moveCircle, refreshRate);
        }, 5000);
    }

      var icons = line.get('icons');
      icons[0].offset = perc + '%';

      line.set('icons', icons);
    }

    var moveCircInterval = setInterval(moveCircle, refreshRate);
  }

函数animateCircle（行）{
var计数=0；
让刷新率=10；
设countFunc=EasingFunctions.easeInOutCubic；
设perc=0
函数moveCircle（）{
计数=计数<1？（计数+0.005）：0；
perc=countFunc（计数）*100=0？perc:100+perc
如果（perc==0）{
clearInterval（moveCircInterval）；
设置超时（（）=>{
moveCircInterval=setInterval（moveCircle，刷新率）；
}, 5000);
}
var icons=line.get（'icons'）；
图标[0]。偏移量=perc+'%'；
行。设置（'图标'，图标）；
}
var moveCircInterval=setInterval（moveCircle，刷新率）；
}

---

请尝试一下，让我知道它是否适合你

如果我正确理解了您的担忧，我们可以对您的代码进行如下调整：

function animateCircle(line) {
    var count = 0;
    let refreshRate = 10;
    let countFunc = EasingFunctions.easeInOutCubic;
    let perc = 0

    function moveCircle() {
      count = count < 1 ? (count + 0.005) : 0;

      perc = countFunc(count) * 100 <= 100 ? countFunc(count) * 100 :  countFunc(count) * 100 - 100
      perc = perc >= 0 ? perc : 100 + perc
      if (perc === 0) {
        clearInterval(moveCircInterval);
        setTimeout(() => {
            moveCircInterval = setInterval(moveCircle, refreshRate);
        }, 5000);
    }

      var icons = line.get('icons');
      icons[0].offset = perc + '%';

      line.set('icons', icons);
    }

    var moveCircInterval = setInterval(moveCircle, refreshRate);
  }

函数animateCircle（行）{
var计数=0；
让刷新率=10；
设countFunc=EasingFunctions.easeInOutCubic；
设perc=0
函数moveCircle（）{
计数=计数<1？（计数+0.005）：0；
perc=countFunc（计数）*100=0？perc:100+perc
如果（perc==0）{
clearInterval（moveCircInterval）；
设置超时（（）=>{
moveCircInterval=setInterval（moveCircle，刷新率）；
}, 5000);
}
var icons=line.get（'icons'）；
图标[0]。偏移量=perc+'%'；
行。设置（'图标'，图标）；
}
var moveCircInterval=setInterval（moveCircle，刷新率）；
}

---

请尝试一下，让我知道它是否适合你

我最后做了这样一件事：

function animateCircle(line) {
  var remove = window.setInterval(function() {
    var count = 0;
    let refreshRate = 20;
    let countFunc = EasingFunctions.easeInOutQuint;
    let perc = 0
    var now, before = new Date();
    var move = window.setInterval(function() {
      now = new Date();
      var elapsedTime = (now.getTime() - before.getTime());
      var icons = line.get('icons');

      if (elapsedTime > refreshRate + 5000) {
        // reset if navigate away from tab
        count = 0.005
        window.clearInterval(move)
      } else {
        count = count < 1 ? (count + 0.005) : 0;
      }

      perc = countFunc(count) * 100 <= 100 ? countFunc(count) * 100 : countFunc(count) * 100 - 100
      perc = perc >= 0 ? perc : 100 + perc
      perc === 0 || perc === 100 ? (window.clearInterval(move)) : ''

      icons[0].icon.path = svgTrans(perc)
      icons[0].offset = perc + '%';

      line.set('icons', icons);
    }, refreshRate)

  }, 5000)
}

函数animateCircle（行）{
var remove=window.setInterval（函数（）{
var计数=0；
让刷新率=20；
设countFunc=EasingFunctions.easeInOutQuint；
设perc=0
var now，before=新日期（）；
var move=window.setInterval（函数（）{
现在=新日期（）；
var elapsedTime=（now.getTime（）-before.getTime（））；
var icons=line.get（'icons'）；
如果（elapsedTime>refreshRate+5000）{
//如果导航到远离选项卡，则重置
计数=0.005
窗口清除间隔（移动）
}否则{
计数=计数<1？（计数+0.005）：0；
}
perc=countFunc（计数）*100=0？perc:100+perc
perc==0 | | perc==100？（window.clearInterval（移动））：“”
图标[0]。icon.path=svgTrans（perc）
图标[0]。偏移量=perc+'%'；
行。设置（'图标'，图标）；
}，刷新率）
}, 5000)
}

---

我最后做了这样一件事：

function animateCircle(line) {
  var remove = window.setInterval(function() {
    var count = 0;
    let refreshRate = 20;
    let countFunc = EasingFunctions.easeInOutQuint;
    let perc = 0
    var now, before = new Date();
    var move = window.setInterval(function() {
      now = new Date();
      var elapsedTime = (now.getTime() - before.getTime());
      var icons = line.get('icons');

      if (elapsedTime > refreshRate + 5000) {
        // reset if navigate away from tab
        count = 0.005
        window.clearInterval(move)
      } else {
        count = count < 1 ? (count + 0.005) : 0;
      }

      perc = countFunc(count) * 100 <= 100 ? countFunc(count) * 100 : countFunc(count) * 100 - 100
      perc = perc >= 0 ? perc : 100 + perc
      perc === 0 || perc === 100 ? (window.clearInterval(move)) : ''

      icons[0].icon.path = svgTrans(perc)
      icons[0].offset = perc + '%';

      line.set('icons', icons);
    }, refreshRate)

  }, 5000)
}

函数animateCircle（行）{
var remove=window.setInterval（函数（）{
var计数=0；
让刷新率=20；
设countFunc=EasingFunctions.easeInOutQuint；
设perc=0
var now，before=新日期（）；
var move=window.setInterval（函数（）{
现在=新日期（）；
var elapsedTime=（now.getTime（）-before.getTime（））；
var icons=line.get（'icons'）；
如果（elapsedTime>refreshRate+5000）{
//如果导航到远离选项卡，则重置
计数=0.005
窗口清除间隔（移动）
}否则{
计数=计数<1？（计数+0.005）：0；
}
perc=countFunc（计数）*100=0？perc:100+perc
perc==0 | | perc==100？（window.clearInterval（移动））：“”
图标[0]。icon.path=svgTrans（perc）
图标[0]。偏移量=perc+'%'；
行。设置（'图标'，图标）；
}，刷新率）
}, 5000)
}

---

为什么您希望在n毫秒内调用另一个函数？所以每5秒你就要注册另一个函数，这个函数应该是每

refreshRate

ms调用一次。所以你认为只要每5秒清除一次，然后重新注册就可以了@t、 Nieseplese读到这篇文章：我不清楚你试图用这个结构实现什么。我试图每10毫秒调用一次moveCircle。然后，当它完成时，或者当

perc

返回到0时，等待5秒钟，然后重新开始@t、 Niesew为什么您希望有其他东西

setInterval

注册一个函数，每次调用n毫秒？所以每5秒你就要注册另一个函数，这个函数应该是每

refreshRate

ms调用一次。所以你认为只要每5秒清除一次，然后重新注册就可以了@t、 Nieseplese读到这篇文章：我不清楚你试图用这个结构实现什么。我试图每10毫秒调用一次moveCircle。然后，当它完成时，或者当

perc

返回到0时，等待5秒钟，然后重新开始@t、 侄女