ความแตกต่างระหว่าง setTimeout ทั้งที่มีและไม่มีเครื่องหมายคำพูดและวงเล็บ

ฉันกำลังเรียนรู้ JavaScript และฉันได้เรียนรู้เมื่อเร็ว ๆ นี้เกี่ยวกับเหตุการณ์กำหนดเวลา JavaScript เมื่อฉันเรียนรู้setTimeoutที่W3Schoolsฉันสังเกตเห็นรูปแปลก ๆ ที่ฉันไม่เคยพบเจอมาก่อน พวกเขากำลังใช้เครื่องหมายคำพูดคู่แล้วเรียกใช้ฟังก์ชัน

ตัวอย่าง:

setTimeout("alertMsg()", 3000);

ฉันรู้ว่าอัญประกาศคู่และเดี่ยวใน JavaScript หมายถึงสตริง

นอกจากนี้ฉันเห็นว่าฉันสามารถทำเช่นเดียวกัน:

setTimeout(alertMsg, 3000);

ด้วยวงเล็บมันคือการอ้างอิงโดยไม่ต้องวงเล็บมันคัดลอก เมื่อฉันใช้คำพูดและวงเล็บมันเริ่มบ้า

ฉันจะดีใจถ้ามีคนอธิบายให้ฉันฟังถึงความแตกต่างระหว่างการใช้ทั้งสามวิธีsetTimeout:

ด้วยวงเล็บ:

setTimeout("alertMsg()", 3000);

ไม่มีเครื่องหมายคำพูดและวงเล็บ:

setTimeout(alertMsg, 3000);

และอันที่สามใช้คำพูดเท่านั้น:

setTimeout("alertMsg", 3000);

หมายเหตุ: เป็นแหล่งที่ดีกว่าสำหรับ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 () ไม่ทำงานเพราะเราวางไว้ในเครื่องหมายคำพูดโดยไม่มีฝ่ายดังนั้นมันจะถือว่าเป็นสตริง