在JavaScript中以可变速度创建变量计数器

Question

我有问题。 我想制作一个从1到9重复的计数器。 两次计数之间的时间应该是可变的（同一系列中为1到10秒）。 有时，它应该加1，有时是2（因此有时跳过一个数字）。

使用JavaScript可以吗？

谢谢。

这是我拥有的代码，但仅是计数，有时不跳过数字，计数时间固定为500毫秒。

  <div id="value">1</div>
  <script>
function animateValue(id){
    var obj = document.getElementById(id);
    var current = obj.innerHTML;
    setInterval(function(){
    obj.innerHTML = current++;
    },500);
}
animateValue('value');
</script>
   </html>````

Answer 1

首先，一个JSFiddle： http://jsfiddle.net/5k0xsrj6/embedded/result/

JSFiddle具有较大的样式化文本： https://jsfiddle.net/9f4vgLbx/embedded/result

编辑：我发现您对JavaScript不熟悉。我还包括了非ES6 JavaScript。

您的代码面临的最大问题是使用setInterval，因为您需要一个可变计时器。

考虑使用一个调用自身并设置计时器的函数来代替setInterval。调用setTimeout后，它将再次调用该函数以设置另一个超时，从而有效地创建了一个间隔。

非ES6脚本：

var el = document.body;
var max_count = 9;
var current_count = 1;

// Function which sets our timer
function timer(delay) {
    // Set a timeout with our passed `delay` arg
    setTimeout(function () {
        // Adds either 1 or 2 based on the return value of getIteration
        current_count += getIteration();

        // As we have a max, reset to 1 if we're over
        if (current_count > max_count) {
            current_count = 1;
        }

        // Update innerHTML
        writer();

        // Call next iteration
        loop();

    }, delay);
}

// Writes our innerHTML
function writer() {
    el.innerHTML = current_count;
}

// Returns 1000 through 10000
function getDelay() {
    return Math.ceil(Math.random() * 10) * 1000;
}

// Returns either 1 or 2
function getIteration() {
    return Math.ceil(Math.random() * 2);
}

// Our main function to loop
function loop() {
    // getDelay will return a value between 1000 - 10000
    timer(getDelay());
}

// Sets Initial Value
writer();

// Main
loop();

原文：

这是JSFiddle上的代码示例。我添加了一些评论，希望可以解释其逻辑。

{
    const el = document.body;
    const max_count = 9;
    let current_count = 1;

    // Function which sets our timer
    const timer = delay => {
        setTimeout(() => {
            current_count += getIteration();

            if (current_count > max_count) {
                current_count = 1;
            }

            // Update innerHTML
            writer();

            // Call next iteration
            main();

        }, delay);
    }

    // Writes our innerHTML
    const writer = (str, log) => {
        if (log) {
            console.log(str);
        } else {
            el.innerHTML = `Current count: ${current_count}`;
        }
    }

    // Returns 1000 through 10000
    const getDelay = () => {
        return Math.ceil(Math.random() * 10) * 1000;
    }

    // Returns either 1 or 2
    const getIteration = () => {
        return Math.ceil(Math.random() * 2);
    }

    // Our main function to loop
    const main = () => {
        const delay = getDelay();

        writer(`Next delay is ${delay}ms`, true);

        timer(delay);
    }

    // Set Initial Value
    writer();

    // Main
    main();
}

希望这会有所帮助！如有任何疑问，请随时提问！