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

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

여기에 모든 혼란없이 초보자를위한 간단한 버전이 있습니다. 그냥 함수를 선언하고 호출 한 다음 간격을 시작합니다. 그게 다야.

//Declare your function here
function My_Function(){
  console.log("foo");
}    

//Call the function first
My_Function();

//Set the interval
var interval = window.setInterval( My_Function, 500 );

이 문제를 해결하기 위해 페이지가로드 된 후 처음으로 함수를 실행합니다.

function foo(){ ... }

window.onload = function() {
   foo();
};

window.setInterval(function()
{
    foo(); 
}, 5000);

firstInterval 이라는 편리한 npm 패키지가 있습니다 (전체 공개, 내 것).

여기서 많은 예제는 매개 변수 처리를 포함하지 않으며 setInterval대규모 프로젝트에서 기본 동작을 변경하는 것은 악의적입니다. 문서에서 :

이 패턴

setInterval(callback, 1000, p1, p2);
callback(p1, p2);

~와 동일하다

firstInterval(callback, 1000, p1, p2);

브라우저에서 구식이고 의존성을 원하지 않는 경우 코드 에서 쉽게 잘라 붙여 넣을 수 있습니다 .

// YCombinator
function anonymous(fnc) {
  return function() {
    fnc.apply(fnc, arguments);
    return fnc;
  }
}

// Invoking the first time:
setInterval(anonymous(function() {
  console.log("bar");
})(), 4000);

// Not invoking the first time:
setInterval(anonymous(function() {
  console.log("foo");
}), 4000);
// Or simple:
setInterval(function() {
  console.log("baz");
}, 4000);

자, 이것은 너무 복잡하므로 더 간단하게 설명하겠습니다.

function hello(status ) {    
  console.log('world', ++status.count);
  
  return status;
}

setInterval(hello, 5 * 1000, hello({ count: 0 }));

초기 지연 시간 (예 : 100)을 매우 작게 설정하고 기능 내에서 원하는 지연 시간으로 설정할 수 있습니다.

var delay = 100;

function foo() {
  console.log("Change initial delay-time to what you want.");
  delay = 12000;
  setTimeout(foo, delay);
}

표준 setTimeout / setInterval은 직접 0으로 설정하더라도 약 몇 밀리 초의 시간 초과를 갖기 때문에 함수의 즉각적인 비동기 호출에 문제가 있습니다. 브라우저 별 작업으로 인해 발생합니다.

Chrome, Safari, Opera에서 REAL 제로 지연 코드가있는 코드 예제

function setZeroTimeout(callback) {
var channel = new MessageChannel();
channel.port1.onmessage = callback;
channel.port2.postMessage('');
}

자세한 내용은 여기를 참조 하십시오

그리고 첫 번째 수동 호출 후 함수와의 간격을 만들 수 있습니다.

실제로 가장 빠른 것은

interval = setInterval(myFunction(),45000)

이것은 myfunction을 호출 한 다음 45 초마다 agaian을 수행합니다.

interval = setInterval(myfunction, 45000)

전화하지는 않지만 예약 만