1. ホーム
  2. javascript

[解決済み] SetIntervalの実行中に間隔を変更したい

2022-04-20 19:29:21

質問

setIntervalを使用して、10分の1秒ごとに文字列を操作するjavascript関数を、ある回数繰り返して書いています。

function timer() {
    var section = document.getElementById('txt').value;
    var len = section.length;
    var rands = new Array();

    for (i=0; i<len; i++) {
        rands.push(Math.floor(Math.random()*len));
    };

    var counter = 0
    var interval = setInterval(function() {
        var letters = section.split('');
        for (j=0; j < len; j++) {
            if (counter < rands[j]) {
                letters[j] = Math.floor(Math.random()*9);
            };
        };
        document.getElementById('txt').value = letters.join('');
        counter++

        if (counter > rands.max()) {
            clearInterval(interval);
        }
    }, 100);
};

間隔を特定の数字で設定するのではなく、カウンターを元に、実行するたびに更新していきたいのです。 だから代わりに

var interval = setInterval(function() { ... }, 100);

というようなものでしょう。

var interval = setInterval(function() { ... }, 10*counter);

残念ながら、これはうまくいきませんでした。 10*counter"が0になるように思えたのです。

では、匿名関数を実行するたびに間隔を調整するにはどうすればよいのでしょうか。

どのように解決するのですか?

使用方法 setTimeout() の代わりに コールバックは次のタイムアウトを発生させる役割を果たし、その時点でタイミングを増やすなど操作することができます。

EDIT

ここに、あらゆる関数呼び出しに対して "減速"タイムアウトを適用するために使用できる汎用関数があります。

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);