IT story

따옴표와 괄호가 있거나없는 setTimeout의 차이점

hot-time 2020. 4. 13. 08:21
반응형

따옴표와 괄호가 있거나없는 setTimeout의 차이점


JavaScript를 배우고 있으며 최근 JavaScript 타이밍 이벤트에 대해 배웠습니다. W3SchoolssetTimeout 에서 알게되었을 때 , 나는 이전에 뛰지 않은 이상한 인물을 발견했습니다. 그들은 큰 따옴표를 사용하고 함수를 호출합니다.

예:

setTimeout("alertMsg()", 3000);

JavaScript에서 큰 따옴표와 작은 따옴표는 문자열을 의미합니다.

또한 나는 그렇게 할 수 있음을 보았다.

setTimeout(alertMsg, 3000);

괄호를 사용하면 괄호없이 참조됩니다. 따옴표와 괄호를 사용하면 미쳤어.

누군가이 세 가지 사용 방법의 차이점을 나에게 설명 할 수 있다면 기쁠 것입니다 setTimeout.

괄호로 :

setTimeout("alertMsg()", 3000);

따옴표와 괄호없이 :

setTimeout(alertMsg, 3000);

그리고 세 번째는 따옴표 만 사용합니다.

setTimeout("alertMsg", 3000);

NB : 더 좋은 setTimeout참조 소스는 MDN 입니다.


setInterval또는 사용setTimeout

setTimeout또는 의 첫 번째 인수로 함수에 대한 참조를 전달해야합니다 setInterval. 이 참조는 다음과 같은 형식 일 수 있습니다.

  • 익명의 기능

    setTimeout(function(){/* Look mah! No name! */},2000);
    
  • 기존 함수의 이름

    function foo(){...}
    
    setTimeout(foo, 2000);
    
  • 기존 함수를 가리키는 변수

    var foo = function(){...};
    
    setTimeout(foo, 2000);
    

    "함수 이름"과 별도로 "함수 변수"를 설정했습니다. 변수와 함수 이름이 동일한 네임 스페이스를 차지하고 서로를 알아볼 수있는 것은 분명하지 않습니다.

인수 전달

함수를 호출하고 매개 변수를 전달하려면 타이머에 지정된 콜백 내에서 함수를 호출하면됩니다.

setTimeout(function(){
  foo(arg1, arg2, ...argN);
}, 1000);

처리기에 인수를 전달하는 또 다른 방법이 있지만 브라우저 간 호환되지 않습니다 .

setTimeout(foo, 2000, arg1, arg2, ...argN);

콜백 컨텍스트

기본적으로 this실행될 때 콜백의 컨텍스트 ( 타이머가 호출 한 함수 내부 )는 전역 객체 window입니다. 변경하려면을 사용하십시오 bind.

setTimeout(function(){
  this === YOUR_CONTEXT; // true
}.bind(YOUR_CONTEXT), 2000);

보안

가능하지만 문자열setTimeout또는로 전달 해서는 안됩니다setInterval . 문자열을 전달하면 수 setTimeout()또는 setInterval()유사한 기능을 사용 eval()하는 스크립트로 실행하는 문자열을 임의적이고 잠재적으로 유해한 스크립트 실행이 가능하게를.


작성한 setTimeout 함수가 실행되고 있지 않다고 생각합니다. jquery를 사용하는 경우 다음을 수행하여 올바르게 실행되도록 할 수 있습니다.

    function alertMsg() {
      //your func
    }

    $(document).ready(function() {
       setTimeout(alertMsg,3000); 
       // the function you called by setTimeout must not be a string.
    });

요셉에게 전적으로 동의하십시오.

이것을 테스트하는 바이올린은 다음과 같습니다. http://jsfiddle.net/nicocube/63s2s/

바이올린의 맥락에서 함수가 전역 범위에 정의되어 있지 않기 때문에 문자열 인수가 작동하지 않습니다.


함수의 첫 번째 매개 변수로 문자열을 전달하는 경우 실제로 발생하는 상황

setTimeout ( 'string', number)

실행 시간 ( number밀리 초가 지난 후) 일 때 평가 된 첫 번째 매개 변수의 값입니다 . 기본적으로

setTimeout ( eval('string'), number)

이것은

타이머가 만료 될 때 컴파일되고 실행되는 함수 대신 문자열을 포함 할 수있는 대체 구문입니다. eval ()을 보안 상 위험하게 만드는 것과 같은 이유로이 구문은 권장되지 않습니다.

따라서 여러분이 참조하는 샘플은 좋은 샘플이 아니며, 다른 상황이나 단순한 오타로 제공 될 수 있습니다.

이런 식으로 호출하면 setTimeout(something, number)첫 번째 매개 변수는 문자열이 아니라라는 이름의 포인터 something입니다. 그리고 다시 something문자열 이면 평가됩니다. 그러나 기능이면 기능이 실행됩니다. jsbin 샘플


    ##If i want to wait for some response from server or any action we use setTimeOut.

    functionOne =function(){
    console.info("First");

    setTimeout(()=>{
    console.info("After timeOut 1");
    },5000);
    console.info("only setTimeOut() inside code waiting..");
    }

    functionTwo =function(){
    console.info("second");
    }
    functionOne();
    functionTwo();

## So here console.info("After timeOut 1"); will be executed after time elapsed.
Output:
******************************************************************************* 
First
only setTimeOut() inside code waiting..
second
undefined
After timeOut 1  // executed after time elapsed.

괄호로 :

setTimeout("alertMsg()", 3000); // It work, here it treat as a function

따옴표와 괄호없이 :

setTimeout(alertMsg, 3000); // It also work, here it treat as a function

그리고 세 번째는 따옴표 만 사용합니다.

setTimeout("alertMsg", 3000); // It not work, here it treat as a string

function alertMsg1() {
        alert("message 1");
    }
    function alertMsg2() {
        alert("message 2");
    }
    function alertMsg3() {
        alert("message 3");
    }
    function alertMsg4() {
        alert("message 4");
    }

    // this work after 2 second
    setTimeout(alertMsg1, 2000);

    // This work immediately
    setTimeout(alertMsg2(), 4000);

    // this fail
    setTimeout('alertMsg3', 6000);

    // this work after 8second
    setTimeout('alertMsg4()', 8000);

위의 예에서 첫 번째 alertMsg2 () 함수 호출 즉시 (우리는 4S 시간 초과를 주지만 귀찮게하지는 않습니다) 그 후 alertMsg1 () (2 초 대기) 다음 alertMsg4 () (8 초 대기 시간) 그러나 alertMsg3 ()은 파티없이 따옴표 안에 배치하므로 문자열로 취급되기 때문에 작동하지 않습니다.

참고 URL : https://stackoverflow.com/questions/10312963/difference-between-settimeout-with-and-without-quotes-and-parentheses

반응형