따옴표와 괄호가 있거나없는 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를 제한하지만 4A는 기다리지 않습니다) 그 후 alertMsg1 () (2 초 동안 대기) 다음에 alertMsg4 () (8 초 동안 대기) 그러나 alertMsg3 ()은 파티없이 따옴표 안에 배치하므로 문자열로 취급되므로 작동하지 않습니다.