Question

如何在JS下面设置无限循环？在底部它有一个计时器运行50秒我需要它每50秒运行一次。我的JS知识是0％。我甚至不知道下面会发生什么，有些是向我解释的，所以非常小但是模糊不清。

//an array for later use at line 30 and line 35.
var classnames = ["one","two","three","four","five","six"];

//Used css3 selector for class (".classname") 
var elements = document.querySelectorAll(".ani");

setTimeout(function() {
for (var i=0; i<elements.length; i++) {
var element = elements[i];

//e.g elements[0] removes class "one", elements[1] removes "two"
element.classList.remove(classnames[i]);

element.offsetWidth = element.offsetWidth;

//e.g elements[0] adds class "one", elements[1] adds "two"
element.classList.add(classnames[i]);
}
}, (50*1000));

Answer 1

我不明白你正在尝试用你正在使用的元素完成什么，但我会留下它，因为它超出了你的问题的直接范围。

只关注如何每50秒运行一次的问题，许多人会建议setinterval。但是，我会建议您坚持使用setTimeout并调整代码以递归方式运行（在setTimeout中从内部再次调用该函数）。

我提供这种替代方法，因为setInterval将继续排队对代码的调用，即使代码中的某些内容需要一段时间但尚未完成。这可能导致竞争条件，性能下降等。通过使用setTimeout，我们确保在安排新的运行之前完成运行。

以下是您修改的代码，以执行我的建议：

var classnames = ["one","two","three","four","five","six"],
    elements = document.querySelectorAll(".ani"),
    // put the logic into a function which we can call
    cycler = function () {
        var i,
            c = elements.length,
            element;

        for (i = 0; i < c; i++) {
            // your original element manipulation code, odd as it may be
            element = elements[i];

            element.classList.remove(classnames[i]);
            element.offsetWidth = element.offsetWidth;

            element.classList.add(classnames[i]);
        }

        // queue up another run
        cycle_timer = setTimeout(cycler, 50*1000);
    },
    //somewhere to store the return of setTimeout so we can stop it if we want
    cycle_timer = null;

// start it up!
cycler();

// if you want to stop it:
clearTimeout(cycle_timer);

Answer 2

setInterval(function() {
  // do your stuff here
}, 50*1000);

JS无限循环

2 个答案: