183

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 に等しいように見えました。

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

4

17 に答える 17

145

匿名関数を使用できます。

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

更新: A. Wolff が示唆しsetTimeoutたように、 の必要性を避けるために使用しclearIntervalます。

var counter = 10;
var myFunction = function() {
    counter *= 10;
    setTimeout(myFunction, counter);
}
setTimeout(myFunction, counter);
于 2011-09-16T14:01:04.123 に答える
123

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);
于 2009-08-14T21:18:00.740 に答える
24

私はこの質問が好きです - 私の中で小さなタイマーオブジェクトに影響を与えました:

window.setVariableInterval = function(callbackFunc, timing) {
  var variableInterval = {
    interval: timing,
    callback: callbackFunc,
    stopped: false,
    runLoop: function() {
      if (variableInterval.stopped) return;
      var result = variableInterval.callback.call(variableInterval);
      if (typeof result == 'number')
      {
        if (result === 0) return;
        variableInterval.interval = result;
      }
      variableInterval.loop();
    },
    stop: function() {
      this.stopped = true;
      window.clearTimeout(this.timeout);
    },
    start: function() {
      this.stopped = false;
      return this.loop();
    },
    loop: function() {
      this.timeout = window.setTimeout(this.runLoop, this.interval);
      return this;
    }
  };

  return variableInterval.start();
};

使用例

var vi = setVariableInterval(function() {
  // this is the variableInterval - so we can change/get the interval here:
  var interval = this.interval;

  // print it for the hell of it
  console.log(interval);

  // we can stop ourselves.
  if (interval>4000) this.stop();

  // we could return a new interval after doing something
  return interval + 100;
}, 100);  

// we can change the interval down here too
setTimeout(function() {
  vi.interval = 3500;
}, 1000);

// or tell it to start back up in a minute
setTimeout(function() {
  vi.interval = 100;
  vi.start();
}, 60000);
于 2009-08-14T22:24:42.150 に答える
18

元の投稿者と同じ質問がありましたが、解決策としてこれを行いました。これがどれほど効率的かはわかりません....

interval = 5000; // initial condition
var run = setInterval(request , interval); // start setInterval as "run"

    function request() { 

        console.log(interval); // firebug or chrome log
        clearInterval(run); // stop the setInterval()

         // dynamically change the run interval
        if(interval>200 ){
          interval = interval*.8;
        }else{
          interval = interval*1.2;
        }

        run = setInterval(request, interval); // start the setInterval()

    }
于 2013-08-22T06:26:05.697 に答える
14

これが私の方法です。setTimeout を使用します。

var timer = {
    running: false,
    iv: 5000,
    timeout: false,
    cb : function(){},
    start : function(cb,iv){
        var elm = this;
        clearInterval(this.timeout);
        this.running = true;
        if(cb) this.cb = cb;
        if(iv) this.iv = iv;
        this.timeout = setTimeout(function(){elm.execute(elm)}, this.iv);
    },
    execute : function(e){
        if(!e.running) return false;
        e.cb();
        e.start();
    },
    stop : function(){
        this.running = false;
    },
    set_interval : function(iv){
        clearInterval(this.timeout);
        this.start(false, iv);
    }
};

使用法：

timer.start(function(){
    console.debug('go');
}, 2000);

timer.set_interval(500);

timer.stop();
于 2015-06-30T14:00:48.820 に答える
11

より簡単な方法はif、更新された関数にステートメントと、一定の時間間隔でコマンドを実行するためのコントロールを含めることです。次の例では、2秒ごとにアラートを実行し、間隔（intrv）を動的に変更できます...

var i=1;
var intrv=2; // << control this variable

var refreshId = setInterval(function() {
  if(!(i%intrv)) {
    alert('run!');
  }
  i++;
}, 1000);
于 2011-06-10T17:11:24.337 に答える
4

これは、必要に応じて開始できます。タイムアウトは、私が時間の一番上に保つために使用した方法です。

時間ごとにコード ブロックを開始する必要がありました。したがって、これはサーバーの起動時に開始され、1 時間ごとに間隔が実行されます。基本的に、最初の実行は、同じ分内にインターバルを開始することです。したがって、init から 1 秒後に、すぐに実行し、5 秒ごとに on を実行します。

var interval = 1000;
var timing =function(){
    var timer = setInterval(function(){
        console.log(interval);
        if(interval == 1000){ /*interval you dont want anymore or increment/decrement */
            interval = 3600000; /* Increment you do want for timer */
            clearInterval(timer);
            timing();
        }
    },interval);
}
timing();

または、開始時に何かを発生させ、特定の間隔で永久に発生させたい場合は、setInterval と同時に呼び出すことができます。例えば：

var this = function(){
 //do
}
setInterval(function(){
  this()
},3600000)
this()

ここでは、これを最初に実行し、その後は 1 時間ごとに実行します。

于 2015-09-24T15:45:12.083 に答える
2

setIntervals も同期して速度を変更できず、質問を投稿しようとしていました。しかし、私は方法を見つけたと思います。私は初心者なので、それは確かに改善されるべきです。ですから、これに関するあなたのコメント/発言を喜んで読みたいと思います。

<body onload="foo()">
<div id="count1">0</div>
<div id="count2">2nd counter is stopped</div>
<button onclick="speed0()">pause</button>
<button onclick="speedx(1)">normal speed</button>
<button onclick="speedx(2)">speed x2</button>
<button onclick="speedx(4)">speed x4</button>
<button onclick="startTimer2()">Start second timer</button>
</body>
<script>
var count1 = 0,
    count2 = 0,
    greenlight = new Boolean(0), //blocks 2nd counter
    speed = 1000,   //1second
    countingSpeed;
function foo(){
    countingSpeed = setInterval(function(){
        counter1();
        counter2();
    },speed);
}
function counter1(){
    count1++;
    document.getElementById("count1").innerHTML=count1;
}
function counter2(){
    if (greenlight != false) {
        count2++;
        document.getElementById("count2").innerHTML=count2;
    }
}
function startTimer2(){
    //while the button hasn't been clicked, greenlight boolean is false
    //thus, the 2nd timer is blocked
    greenlight = true;
    counter2();
    //counter2() is greenlighted
}

//these functions modify the speed of the counters
function speed0(){
    clearInterval(countingSpeed);
}
function speedx(a){
    clearInterval(countingSpeed);
    speed=1000/a;
    foo();
}
</script>

ページがロードされたらカウンターを増やしたい場合は、 putcounter1()とcounter2()in foo()beforecountingSpeedを呼び出します。speedそれ以外の場合、実行までに数ミリ秒かかります。編集：短い答え。

于 2014-03-06T21:13:03.077 に答える
2

減速/加速インターバル タイマーを作成するさらに別の方法を次に示します。間隔は、合計時間が超過するまで係数で乗算されます。

function setChangingInterval(callback, startInterval, factor, totalTime) {
    let remainingTime = totalTime;
    let interval = startInterval;

    const internalTimer = () => {
        remainingTime -= interval ;
        interval *= factor;
        if (remainingTime >= 0) {
            setTimeout(internalTimer, interval);
            callback();
        }
    };
    internalTimer();
}
于 2019-02-06T17:27:29.787 に答える
1

以下のコードは、関数を加速 (加速 > 1) または減速 (加速 <1) しsetIntervalます。

function accelerate(yourfunction, timer, refresh, acceleration) {
    var new_timer = timer / acceleration;
    var refresh_init = refresh;//save this user defined value
    if (refresh < new_timer ){//avoid reseting the interval before it has produced anything.
        refresh = new_timer + 1 ;
    };
    var lastInter = setInterval(yourfunction, new_timer);
    console.log("timer:", new_timer);
    function stopLastInter() {
        clearInterval(lastInter);
        accelerate(yourfunction, new_timer, refresh_init, acceleration);
        console.log("refresh:", refresh);
    };
    setTimeout(stopLastInter, refresh);
}

と ：

  • timer: ミリ秒単位の setInterval 初期値 (増加または減少)
  • refresh: の新しい値timerが計算されるまでの時間。これが歩幅です
  • acceleration: 古い値と次の値の間のギャップtimer。これが段差の高さ
于 2016-12-22T14:34:35.727 に答える
0

これは、ループをオーバーラップさせたくない場合の私の考えですsetInterval。
また、ループの実行遅延を設定し、その場で即座にループを開始および停止できるようにしたいと考えています。変数と関数
を使用しています。 メイン関数を に設定して、を呼び出して本体内の他の関数を呼び出すことができるようにします。コードの本体が実行されているとき、メイン ループは待機し、繰り返されません。( の場合はそうではありません)loop_flagsetTimeout
asyncawaitsetInterval

簡単なコードの例は次のとおりです。

//@NabiKAZ

document.getElementById("btn_start").addEventListener("click", function() {
  console.log("Starting...");
  loop_flag = true;
  loop_func();
});
document.getElementById("btn_stop").addEventListener("click", function() {
  console.log("Stoping...");
  loop_flag = false;
});

var n = 0;

var loop_flag = false;
var loop_func = async function() {
  if (!loop_flag) {
    console.log("STOP.");
    return;
  }

  //body main function inhere
  n++;
  console.log(n);
  ////


  if (loop_flag) {
    setTimeout(loop_func, document.getElementById("inp_delay").value);
  } else {
    console.log("STOP.");
  }
}
<input id="inp_delay" value="1000">
<button id="btn_start">START</button>
<button id="btn_stop">STOP</button>

ループ内にフェッチ リクエストを含むより完全なコードについては、次を参照してください。

https://jsfiddle.net/NabiKAZ/a5hdw2bo/

于 2022-03-05T03:04:52.813 に答える
-1 
var counter = 15;
var interval = setTimeout(function(){
    // your interval code here
    window.counter = dynamicValue;
    interval();
}, counter);
于 2013-04-25T08:18:10.573 に答える