[javascript] setInterval 함수를 처음 지연없이 실행

JAVASCRIPT / 글쓴이

setInterval자바 스크립트 의 메소드 를 구성하여 메소드를 즉시 실행 한 다음 타이머로 실행하는 방법이 있습니다.

답변

함수를 직접 직접 호출하는 것이 가장 간단합니다.

foo();
setInterval(foo, delay);

그러나 피해야 할 좋은 이유가 있습니다 setInterval. 특히 일부 상황에서는 모든 setInterval이벤트가 지연없이 서로 바로 도착할 수 있습니다. 또 다른 이유는 루프를 중지하려면 명시 적으로 호출 clearInterval해야하므로 원래 setInterval호출 에서 반환 된 핸들을 기억해야한다는 것 입니다.

따라서 다른 방법은 대신 다음을 foo사용하여 후속 호출에 대해 트리거하는 setTimeout것입니다.

function foo() {
   // do stuff
   // ...

   // and schedule a repeat
   setTimeout(foo, delay);
}

// start the cycle
foo();

이렇게 하면 통화 간격이 적어도 유지delay 됩니다. 또한 필요한 경우 루프를 쉽게 취소 setTimeout할 수 있습니다. 루프 종료 조건에 도달하면 호출하지 않습니다 .

더 나은 방법 은 함수를 생성하는 함수를 즉시 호출하는 함수 호출로 마무리 할 수 ​​있습니다 .

(function foo() {
    ...
    setTimeout(foo, delay);
})();

기능을 정의하고 사이클을 한 번에 시작합니다.

답변

내가 당신을 올바르게 이해하고 있는지 확실하지 않지만 다음과 같이 쉽게 할 수 있습니다.

setInterval(function hello() {
  console.log('world');
  return hello;
}(), 5000);

이 작업을 수행하는 방법에는 여러 가지가 있지만 이것이 내가 생각할 수있는 가장 간결한 방법입니다.

답변

나는 때문에 같은 문제로이 질문에 우연히하지만 당신이해야하는 경우에 대한 답변 중 어느 것도 도움이되지 정확히 행동을 같이 setInterval()하지만, 함께 에만 함수가 시작 부분에 즉시 호출된다는 차이.

이 문제에 대한 나의 해결책은 다음과 같습니다.

function setIntervalImmediately(func, interval) {
  func();
  return setInterval(func, interval);
}

이 솔루션의 장점 :

  • 기존 코드를 사용하여 setInterval쉽게 대체 할 수 있습니다.
  • 엄격한 모드에서 작동
  • 기존의 명명 된 함수 및 클로저와 함께 작동합니다.
  • 여전히 반환 값을 사용하여 clearInterval()나중에 전달할 수 있습니다

예:

// create 1 second interval with immediate execution
var myInterval = setIntervalImmediately( _ => {
        console.log('hello');
    }, 1000);

// clear interval after 4.5 seconds
setTimeout( _ => {
        clearInterval(myInterval);
    }, 4500);

건방진하려면 실제로 사용해야하는 경우 setInterval원본을 교체 할 수도 있습니다 setInterval. 따라서 기존 코드 앞에 추가 할 때 코드를 변경할 필요가 없습니다.

var setIntervalOrig = setInterval;

setInterval = function(func, interval) {
    func();
    return setIntervalOrig(func, interval);
}

그러나 위에 나열된 모든 장점은 여기에 적용되지만 대체 할 필요는 없습니다.

답변

setInterval()해당 동작을 제공하는 함수를 래핑 할 수 있습니다.

function instantGratification( fn, delay ) {
    fn();
    setInterval( fn, delay );
}

… 다음과 같이 사용하십시오.

instantGratification( function() {
    console.log( 'invoked' );
}, 3000);

답변

필요한 경우 예쁘게 포장하는 래퍼가 있습니다.

(function() {
    var originalSetInterval = window.setInterval;

    window.setInterval = function(fn, delay, runImmediately) {
        if(runImmediately) fn();
        return originalSetInterval(fn, delay);
    };
})();

setInterval의 세 번째 인수를 true로 설정하면 setInterval을 호출 한 직후 처음으로 실행됩니다.

setInterval(function() { console.log("hello world"); }, 5000, true);

또는 세 번째 주장을 생략하면 원래 행동이 유지됩니다.

setInterval(function() { console.log("hello world"); }, 5000);

일부 브라우저는 이 랩퍼가 고려하지 않은 setInterval에 대한 추가 인수 를 지원 합니다. 나는 이것들이 거의 사용되지 않는다고 생각하지만, 필요할 때 명심하십시오.

답변

누군가가 this화살표 기능 인 것처럼 외부를 가져와야합니다 .

(function f() {
    this.emit("...");
    setTimeout(f.bind(this), 1000);
}).bind(this)();

위의 가비지 생성이 귀찮 으면 대신 닫을 수 있습니다.

(that => {
    (function f() {
        that.emit("...");
        setTimeout(f, 1000);
    })();
})(this);

아니면 사용을 고려 장식 코드에 따라.@autobind

답변

다음 순서로 함수를 호출하는 것이 좋습니다.

var _timer = setInterval(foo, delay, params);
foo(params)

특정 조건에서 _timer원하는 경우을 foo에 전달할 수도 clearInterval(_timer)있습니다.

var _timer = setInterval(function() { foo(_timer, params) }, delay);
foo(_timer, params);