Question

我有一个setInterval函数，它每隔半秒钟从数组中更改元素innerHTML。我想让第五项显示5秒钟，但是每半秒钟恢复一次setInterval。

我尝试在setInterval期间更改速度：

if (wordsCnt==5) {
     speed = 5000
  }else{
    speed = 500
  }

var speed = 500

var cycleWords = document.getElementById("cycle-words");
var wordsCnt = 0;
var words = [
  "Graphic designers", 
  "Founders",
  "Photographers",
  "Copywriters",
  "Audio designers",
  "Startups",
  "Film makers",
  "Architects",
  "Instagramers"
];


window.setInterval(function() {
  cycleWords.innerHTML = words[wordsCnt];
  if (wordsCnt < words.length-1) {
    wordsCnt++;
  } else {
    wordsCnt = 0;
  }
  
 if (wordsCnt==5) {
     speed = 5000
  }else{
    speed = 500
  }
}, speed);

<div id="">
 Working with <span id="cycle-words">Copy writers</span></div>
</div>

速度保持不变。

Answer 1

setInterval将继续使用作为参数传递的值运行，无法更改它。您可以取消间隔并创建一个新间隔，但是在这种情况下，只要前一个结束就可以用setTimeout开始新的超时。

// No need for speed ...

// Consider using let & const over var, as they are more steict and you can find errors more easily

const cycleWords = document.getElementById("cycle-words");
let wordsCnt = 0;
const words = ["Graphic designers", "Founders", "Photographers", "Copywriters", "Audio designers", "Startups", "Film makers", "Architects", "Instagramers"];

setTimeout(function showWord() { // name the function, so that we can refer to it later
  cycleWords.innerHTML = words[wordsCnt];
  wordsCnt = (wordsCnt + 1) % words.length; // the modulo operator makes that task easier
  if (wordsCnt === 5) { // use === instead of ==, that saves you from headaches!
    setTimeout(showWord, 5000); // create a new timer
  } else {
    setTimeout(showWord, 500);
  }
}, 500);

<div>Working with <span id="cycle-words">Copy writers</span></div>

Answer 2

您可以使用setTimeout代替设置的时间间隔。这里可以使用的代码

function setDeceleratingTimeout(callback, factor, times)
{
    var internalCallback = function(tick, counter) {
        return function() {
            if (--tick >= 0) {
                window.setTimeout(internalCallback, ++counter * factor);
                callback();
            }
        }
    }(times, 0);

    window.setTimeout(internalCallback, factor);
};

// console.log() requires firebug    
setDeceleratingTimeout(function(){ console.log('hi'); }, 10, 10);
setDeceleratingTimeout(function(){ console.log('bye'); }, 100, 10);

Answer 3

您可以更改索引4的字数，并且每个周期仅添加0.1而不是一个。

var speed = 500,
    cycleWords = document.getElementById("cycle-words"),
    wordsCnt = 0,
    words = ["Graphic designers", "Founders", "Photographers", "Copywriters", "Audio designers", "Startups", "Film makers", "Architects", "Instagramers"],
    interval = window.setInterval(function() {
        cycleWords.innerHTML = words[wordsCnt | 0];      // take an integer value
        wordsCnt += Math.floor(wordsCnt) === 4 ? .1 : 1; // change speed for index 4
        wordsCnt %= words.length;                        // adjust length
    }, speed);

<div>Working with <span id="cycle-words">Copy writers</span></div>

Answer 4

总结要求：

每隔半秒钟执行一次操作
5秒后
等待5秒钟
恢复第1步

建议的解决方案：

setInterval每半秒执行一次任务。 5秒后，清除间隔。 5秒后再次调用setInterval。

let counter = 0;

function resetInterval(){
    let x = setInterval(()=>{
        console.log(counter);
        counter++;
        if (counter % 10 === 0) {
            clearInterval(x);
            setTimeout(()=>{resetInterval()}, 5000);
        }
    }, 500);
}

resetInterval();

Answer 5

请考虑使用递归setTimeout-如果下一个索引为5，则用setTimeout而不是5000调用下一个500：

var speed = 500

var cycleWords = document.getElementById("cycle-words");
var wordsCnt = 0;
var words = [
  "Graphic designers",
  "Founders",
  "Photographers",
  "Copywriters",
  "Audio designers",
  "Startups",
  "Film makers",
  "Architects",
  "Instagramers"
];

const callback = () => {
  cycleWords.innerHTML = words[wordsCnt];
  wordsCnt = (wordsCnt + 1) % words.length;
  setTimeout(
    callback,
    wordsCnt == 5 ? 5000 : 500
  );
};
callback();

<div id="">
  Working with <span id="cycle-words">Copy writers</span></div>
</div>

运行后更改setinterval时间

5 个答案: