setInterval 함수의 매개 변수 전달


320

using이라는 함수에 매개 변수를 전달하는 방법을 알려주십시오 setInterval.

내 예가 setInterval(funca(10,3), 500);잘못되었습니다.


2
구문 :.setInterval(func, delay[, param1, param2, ...]);
O-9

답변:


543

실제 함수가 즉시 실행되지 않도록 익명 함수를 작성해야합니다.

setInterval( function() { funca(10,3); }, 500 );

4
동적 매개 변수는 무엇입니까?
rony36

28
@ rony36-아마도 당신을 위해 간격 타이머를 만드는 기능을 원할 것입니다. 매개 변수를 함수에 전달하면 해당 값이 함수 클로저에서 캡처되고 타이머가 만료 될 때 유지됩니다. function createInterval(f,dynamicParameter,interval) { setInterval(function() { f(dynamicParameter); }, interval); }그런 다음 createInterval(funca,dynamicValue,500); 두 개 이상의 매개 변수에 대해 이것을 확장 할 수 있습니다. 보다 구체적인 변수 이름을 사용하십시오. :)
tvanfosson

@ tvanfosson : 멋진 답변! 함수 에서 간격 양식을 지우는 방법을 알고 funca있습니까?
Flo

@tvanfosson 감사합니다. 나쁘지만 실제로는 주석 섹션에서 작성한 createInterval 예제를 의미했습니다. 그것은 어떻게 작동합니까? 타이머 변수를 동적 매개 변수로 전달하려고 생각했지만 그 방법과 방법이 확실하지 않습니다. 명확성을 기하기 위해 여기에 새로운 질문을 추가했습니다. stackoverflow.com/questions/40414792/…
Flo

78

이제 ES5에서는 bind 메소드 Function prototype :

setInterval(funca.bind(null,10,3),500);

여기 참조


2
이것이 가장 좋은 대답이지만 기능에 따라 예기치 않은 동작이 발생할 수 있습니다. 예를 들어 console.log.bind(null)("Log me")throw Illegal invocation하지만 console.log.bind(console)("Log me")예상대로 작동합니다. 이는 인수 로 console.log필요 하기 때문 입니다. consolethis
Indy

1
가장 좋은 답변입니다. 깨끗하고 깨끗합니다. 고마워요!
Tobi

매우 깨끗하고 효율적입니다!
contactmatt

2
Chrome> = 7, Firefox> = 4.0, Explorer> = 9, Opera> = 11.60, Safari> = 5.1에서 작동하는 것을 추가하십시오 (출처 : developer.mozilla.org/ca/docs/Web/JavaScript/Reference/… )
Roger Veciana 2016 년

60

매개 변수로 설정하여 setInterval에 추가하십시오.

setInterval(funca, 500, 10, 3);

질문의 구문은 eval을 사용하므로 권장되지 않습니다.


2
와?! 언제부터 허용 되었습니까? (심각한 질문)
초승달 신선한

1
확실하지 않다. 내 소스는 : developer.mozilla.org/en/DOM/window.setInterval
Kev

2
@Kev Internet Explorer는 엉망입니다 인수 전달을 지원하지 않습니다. -.-
ShrekOverflow

1
IMHO 이것은 정답입니다. 훌륭하고 간단하며 깨끗한 솔루션.
LightMan

32

매개 변수가 아닌 함수 객체의 속성으로 매개 변수를 전달할 수 있습니다.

var f = this.someFunction;  //use 'this' if called from class
f.parameter1 = obj;
f.parameter2 = this;
f.parameter3 = whatever;
setInterval(f, 1000);

그런 다음 기능 someFunction에서 매개 변수에 액세스 할 수 있습니다. 이것은 범위가 전역 공간으로 자동 이동하고 setInterval이라는 클래스에 대한 참조를 잃는 클래스 내에서 특히 유용합니다. 이 방법을 사용하면 위의 예에서 "someFunction"의 "parameter2"에 올바른 범위가 있습니다.


1
당신은 Classname.prototype.someFunction.parameter1하여 액세스 할 수
JoaquinG

2
객체 또는 함수에 매개 변수를 추가하면 객체의 원시 코드 표현을 다시 작성해야하므로 (예 : 핫 루프에서 수행 된 경우) 컴파일러가 느려질 수 있으므로주의해야합니다.
mattdlockyer

22
     setInterval(function(a,b,c){

          console.log(a + b +c);  

      }, 500, 1,2,3);

           //note the console will  print 6
          //here we are passing 1,2,3 for a,b,c arguments
         // tested in node v 8.11 and chrome 69

가장 잘 설명 된 답변입니다.
Drk_alien

그렇다면 왜 인수를 배열로 전달합니까? 이 세부 사항은 질문과 관련이 없습니다.
user4642212

18

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

setInterval(function() { funca(10,3); },500);

1
이것은 꽤 비싼 전화입니다!
Roy Lee

2
@Roylee 어떻게 비싸요?
user4642212

18
setInterval(function,milliseconds,param1,param2,...)

업데이트 : 2018- "확산"연산자 사용

function repeater(param1, param2, param3){
   alert(param1);
   alert(param2);
   alert(param3); 
}

let input = [1,2,3];
setInterval(repeater,3000,...input);


이것은 더 좋습니다.
Ugur Kazdal

이것은 더 좋습니다.
Ugur Kazdal

11

지금까지 가장 실용적인 답변은 tvanfosson이 제공 한 답변입니다. ES6으로 업데이트 된 버전을 제공하면됩니다.

setInterval( ()=>{ funca(10,3); }, 500);

1
() => {}이 (가) function () {}을 (를) 대체하는 ES6의 새로운 방법이라고 말씀하십니까? 흥미 롭군 첫째, 나는 로켓이지나 갔다고 생각했다. 그리고이 구문에 다른 일반적인 용도가 없다면 매우 이상합니다. 나는 그들이 "뚱뚱한 화살"인 것을 본다. 그래도 이상하다. 나는 누군가가 그것을 좋아하고 그것은 의견의 문제라고 생각합니다.
Richard_G

6

인수를 인용하면 충분합니다.

OK --> reloadIntervalID = window.setInterval( "reloadSeries('"+param2Pass+"')" , 5000)

KO --> reloadIntervalID = window.setInterval( "reloadSeries( "+param2Pass+" )" , 5000)

'각 인수에 작은 따옴표 를 적어 둡니다.

IE8, Chrome 및 FireFox로 테스트


7
eval을 사용하는 것은 끔찍한 습관입니다. 익명의 기능을 사용하는 것이 좋습니다.
SuperIRis

1

나는이 주제가 너무 오래되었다는 것을 알고 있지만 여기에 setInterval함수에 매개 변수를 전달하는 방법에 대한 해결책이 있습니다.

HTML :

var fiveMinutes = 60 * 2;
var display = document.querySelector('#timer');
startTimer(fiveMinutes, display);

자바 스크립트 :

function startTimer(duration, display) {
    var timer = duration,
        minutes, seconds;

    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        --timer; // put boolean value for minus values.

    }, 1000);
}

함수를 호출 할 때 값을 한 번만 액세스해야하지만 매초마다 응답하지 않으므로 답변 (예 :)을 제공 timer하지만 clearInterval()이 시나리오에서 어떻게합니까 ?
user1063287

0

이것은 작동합니다 setInterval("foo(bar)",int,lang);.... Jon Kleiser 가 저를 대답으로 인도합니다.


0

또 다른 해결책은 다음과 같이 함수를 전달하는 것입니다 (동적 변수가있는 경우) : setInterval ( 'funca ('+ x + ','+ y + ')', 500);


0

밑줄 js라는 라이브러리를 사용할 수 있습니다. 바인드 메소드에 멋진 래퍼를 제공하며 구문도 훨씬 깔끔합니다. 지정된 범위에서 함수를 실행할 수 있습니다.

http://underscorejs.org/#bind

_.bind (함수, 범위, * 인수)


0

이 문제는 클로저 사용에 대한 훌륭한 데모가 될 것입니다. 아이디어는 함수가 외부 범위의 변수를 사용한다는 것입니다. 예를 들면 다음과 같습니다.

setInterval(makeClosure("Snowden"), 1000)

function makeClosure(name) {
var ret

ret = function(){
    console.log("Hello, " + name);
}

return ret;
}

"makeClosure"함수는 외부 범위 변수 "name"에 액세스 할 수있는 다른 함수를 반환합니다. 따라서 기본적으로 "makeClosure"함수에 변수를 전달하고 "ret"변수에 지정된 함수에 변수를 사용해야합니다. 이에 따라 setInterval은 "ret"에 지정된 기능을 실행합니다.


0

Vue 앱과 동일한 문제가있었습니다. 필자의 경우이 솔루션은 익명 함수가 mounted ()생명 고리 후크 선언과 관련하여 화살표 함수로 선언 된 경우에만 작동합니다 .

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.