실행 중 SetInterval 간격 변경


161

setInterval을 사용하여 특정 반복 횟수마다 10 분마다 문자열을 조작하는 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과 같습니다.

그렇다면 익명 함수가 실행될 때마다 간격을 어떻게 조정할 수 있습니까?

답변:


107

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

1
콜백으로, 함수의 마지막 줄이 setTimeout (..., newInterval)으로 재귀 적으로 호출되는 것을 의미합니까?
Marc

1
나는 그것이 그가 의미 한 것이라고 생각합니다. 방금 시도했지만 작동하는 것 같습니다. 고마워요!
Joe Di Stefano

2
단지 9 hi를 준다 :) --t아마도 t-- jsfiddle.net/albertjan/by5fd
albertjan

1
이 작업을 반복적으로 수행하면 스택 오버플로 오류 times가 너무 큰 경우 위험하지 않습니까?
André C. Andersen

4
여기에서 nitpicky이기 때문에 코드를 읽기가 어렵습니다. 다음 줄 중괄호를 사용하려면 최소한 4-8 공백 들여 쓰기를 사용하거나 2 들여 쓰기를 넘지 않아야합니다. IMO 이 버전 은 읽기가 훨씬 쉽습니다. 또한의 이름 변경의 양지 ttick"T"가 방치되어 무엇이든에 나의 추측했다. t꽤 나쁜 변수 이름입니다.
Braden Best 1

124

익명 함수를 사용할 수 있습니다.

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

5
글쎄, 내 대답은 9 월 16 일 '11 일에 게시하고 user28958은 8 월 22 일 '13 일에 게시되었습니다. 그래서 나는 "답장"감사합니다!
nick

12
왜 간격을 사용하고 있습니까? 간단히 지우지 않아도 간단한 시간 초과가 더 좋습니다. 예 : jsfiddle.net/fgs5nwgn
A. Wolff

4
나는 질문의 맥락에 충실했다. setTimeout은 물론 작동합니다
nick

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

4
고마워-내가 작업중 인 비슷한 것을 위해 올바른 방향으로 나를 출발시켰다.
Sponsz 대령

간단하고 효과적입니다. 감사!
농담

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

    }

실제로 OP (및 내) 질문에 답변 하기 때문에이 답변이 더 좋습니다 . 이 훨씬 뛰어난 '실시간'물건 만들기 -의 setTimeout은 setInterval을 그 지연의 영향을받지 않습니다으로 (100 % CPU 사용, 다른 스크립트 등으로) 지연되고 적용됩니다
RozzA

8
나는 귀하의 주장 setInterval이 잘못되었다고 99 % 확신합니다. @ RozzA-여전히 다른 JavaScript와 동일한 지연이 적용되며 거의 모든 브라우저가 setInterval을 4ms로 고정시킵니다. 이것에 관한 게시물에 대한 링크가 있습니까?
gnarf

9

이것은 이것을하는 나의 방법입니다. 나는 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();

+1, 목적에 맞게 약간 수정하여 여러 변수 간격을 사용할 수 있습니다 -jsfiddle.net/h70mzvdq
Dallas

set_interval새 간격이 이전 간격보다 작지 않으면 새 실행을 시작하지 않도록 기능을 수정했습니다 .if (iv < this.iv) { clearInterval(this.timeout); this.start(false, iv); } else { this.iv = iv; }
Dallas

9

훨씬 간단한 방법은 if새로 고친 함수에 명령문을 사용하고 규칙적인 시간 간격으로 명령을 실행하는 컨트롤을 사용하는 것입니다. 다음 예에서는 2 초마다 경고를 실행하며 간격 ( intrv)을 동적으로 변경할 수 있습니다.

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

var refreshId = setInterval(function() {
  if(!(i%intrv)) {
    alert('run!');
  }
  i++;
}, 1000);

이것은 나도 개인적으로 좋아하는 것입니다. 작고 간단하며 확장 가능합니다.
guy mograbi

애플리케이션 이벤트를 기반으로 속도를 재설정 할 수있는 감속 타이머 솔루션을 원했습니다. 이것은 간단하고 완벽하게 필요한 것을 충족 시켰습니다. 감사합니다.
앤드류 브라운

그것은 시원하지만 필요하지 않은 순간에 간격을 발생시킵니다 ... 또한 읽을 수 없습니다. 이러한 이유로 개인적으로 setTimeout을 선호합니다.
Kokodoko

4

그러나 원하는대로 시작할 수 있습니다. 시간 초과는 시간의 맨 위에 유지하는 데 사용한 방법입니다.

매시간마다 코드 블록을 시작해야했습니다. 따라서 이것은 서버 시작시 시작되어 시간 간격으로 실행됩니다. 기본적으로 초기 실행은 동일한 분 내에 간격을 시작하는 것입니다. 따라서 init에서 1 초 후에 즉시 5 초마다 실행하십시오.

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 시간마다 실행합니다.


3

간단한 대답은 이미 생성 된 타이머 간격을 업데이트 할 수 없다는 것 입니다. (이 두 기능입니다 setInterval/setTimer하고 clearInterval/clearTimer, 그래서 데 timerId당신은 단지 그것을 비활성화 할 수 있습니다.)하지만 당신은 몇 가지 해결 방법을 만들 수 있습니다. 이 github repo를 살펴보십시오 .


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>

당신이 원하는 경우 카운터는 페이지가로드 넣어되면 증가하기 시작하는 counter1()counter2()foo()이전 countingSpeed이라고합니다. 그렇지 않으면 speed실행 전에 밀리 초가 걸립니다 . 편집 : 짧은 대답.


2
(function variableInterval() {
    //whatever needs to be done
    interval *= 2; //deal with your interval
    setTimeout(variableInterval, interval);
    //whatever needs to be done
})();

더 짧은 얻을 수 없습니다


1

나는 자바 스크립트의 초보자이며 이전 답변에서 도움을 얻지 못했습니다 (그러나 많은 좋은 아이디어).
아래의이 코드는 가속 (가속> 1) 또는 감속 (가속 <1)입니다. 일부 사람들에게 도움이되기를 바랍니다.

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: ms 단위의 setInterval 초기 값 (증가 또는 감소)
  • refresh:의 새로운 값 timer이 계산 되기 전의 시간 . 이것은 단계 길이입니다
  • factor: 이전 timer값 과 다음 값 사이의 간격 입니다. 이것이 단계 높이입니다

1

새로운 기능을 만드십시오 :

// set Time interval
$("3000,18000").Multitimeout();

jQuery.fn.extend({
    Multitimeout: function () {
        var res = this.selector.split(",");
        $.each(res, function (index, val) { setTimeout(function () { 
            //...Call function
            temp();
        }, val); });
        return true;
    }
});

function temp()
{
    alert();
}

1

여기에 감속 / 가속 간격 타이머를 만드는 또 다른 방법이 있습니다. 간격은 총 시간을 초과 할 때까지 계수를 곱합니다.

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

0
var counter = 15;
var interval = setTimeout(function(){
    // your interval code here
    window.counter = dynamicValue;
    interval();
}, counter);

나에게 오류를 줄 : Uncaught TypeError: interval is not a function하지만이 일 : jsfiddle.net/fgs5nwgn
나비 KAZ

0

위 의 내부 콜백에서 영감을 얻어 몇 분 만에 콜백을 시작하는 기능을 만들었습니다. 시간 초과가 6 000, 15,000, 30 000, 60 000과 같은 간격으로 설정되면 시스템 시계의 다음 1 분으로의 정확한 전환과 동기화 된 간격을 지속적으로 조정합니다.

//Interval timer to trigger on even minute intervals
function setIntervalSynced(callback, intervalMs) {

    //Calculate time to next modulus timer event
    var betterInterval = function () {
        var d = new Date();
        var millis = (d.getMinutes() * 60 + d.getSeconds()) * 1000 + d.getMilliseconds();
        return intervalMs - millis % intervalMs;
    };

    //Internal callback
    var internalCallback = function () {
        return function () {
            setTimeout(internalCallback, betterInterval());
            callback();
        }
    }();

    //Initial call to start internal callback
    setTimeout(internalCallback, betterInterval());
};
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.