Question

我的目标是创建一个在循环中运行数组项的div，并在浏览器加载时立即启动而不是等待启动。它首先开始工作完美，但过了一会儿，它开始在阵列项目之间快速旋转。自然会使浏览器变慢。为什么会这样？我怎样才能解决这个问题？

    var arr = ["<h2 class='text-center'>For the best choice in compounding… Choose Alvix</h2>", "<h2 class='text-center'>We strive to become more self sufficient. <br>For you. For Alvix. For Life.</h2>", "<h2 class='text-center'>Alvix… Providers of Solutions</h2>"
    ];
    var i = 0;

    var timeout;
    function doStuff() {
        document.getElementById('quote').innerHTML = arr[i];
        i++;
        if (i >= arr.length){
          i=0;
        }
        timeout = setInterval(doStuff,4000);
    }
    doStuff();

Answer 1

将setInterval移出doStuff函数。现在你每4秒钟增加另一个4秒计时器。这将在之后每四秒钟立即调用doStuff。

    var arr = ["<h2 class='text-center'>For the best choice in compounding… Choose Alvix</h2>", "<h2 class='text-center'>We strive to become more self sufficient. <br>For you. For Alvix. For Life.</h2>", "<h2 class='text-center'>Alvix… Providers of Solutions</h2>"];
    var i = 0;

    var timeout;
    function doStuff() {
        document.getElementById('quote').innerHTML = arr[i];
        i++;
        if (i >= arr.length){
          i=0;
        }            
    }
    timeout = setInterval(doStuff,4000);
    doStuff();

Answer 2

使用setTimeout加上setInterval每次设置新间隔时调用你的函数，这样逻辑就会发现它变得疯狂，

你有2个解决方案

使用clearInterval

清除时间间隔

 intrval = null
 function doStuff(){
     // logic...
     if(intrval) clearInterval(intrval);
     intrval = setInterval(doStuff, 4000);
  }

  doStuff();

使用SetTimeout

function doStuff(){
// logic...

setTimeout(doStuff,400);
} 
 doStuff();

Answer 3

你继续设置每个递归的新间隔。在函数外部设置区间，这样当你调用它时，它不会重复它的声明。

function doStuff() {
    document.getElementById('quote').innerHTML = arr[i];
    i++;
    if (i >= arr.length){
      i=0;
    }
}
var timeout = setInterval(doStuff,4000);

Answer 4

setInterval调用每时间段的函数。

您正在该函数中调用setInterval，因此每次启动另一个循环。

您从一个间隔开始。 4秒后，你有2. 4秒后，每个人创建另一个，你有4.然后8.然后16。

将行doStuff();替换为timeout = setInterval(doStuff,4000);。

Javascript setInterval经过一段时间疯狂

4 个答案: