Perbedaan antara setTimeout dengan dan tanpa tanda kutip dan tanda kurung

Saya belajar JavaScript dan saya baru-baru ini belajar tentang peristiwa waktu JavaScript. Ketika saya belajar tentang setTimeoutdi W3Schools , saya melihat sosok aneh yang tidak saya temui sebelumnya. Mereka menggunakan tanda kutip ganda dan kemudian memanggil fungsinya.

Contoh:

setTimeout("alertMsg()", 3000);

Saya tahu bahwa tanda kutip ganda dan tunggal dalam JavaScript berarti string.

Saya juga melihat bahwa saya dapat melakukan hal yang sama seperti itu:

setTimeout(alertMsg, 3000);

Dengan tanda kurung itu merujuk, tanpa tanda kurung itu disalin. Ketika saya menggunakan tanda kutip dan tanda kurung itu menjadi gila.

Saya akan senang jika seseorang dapat menjelaskan kepada saya perbedaan antara tiga cara menggunakan ini setTimeout:

Dengan tanda kurung:

setTimeout("alertMsg()", 3000);

Tanpa tanda kutip dan tanda kurung:

setTimeout(alertMsg, 3000);

Dan yang ketiga hanya menggunakan tanda kutip:

setTimeout("alertMsg", 3000);

NB: Sumber setTimeoutreferensi yang lebih baik adalah MDN .

Menggunakan setIntervalatausetTimeout

Anda harus memberikan referensi ke fungsi sebagai argumen pertama untuk setTimeoutatau setInterval. Referensi ini dapat berupa:

• Fungsi anonim

  setTimeout(function(){/* Look mah! No name! */},2000);

• Nama fungsi yang ada

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

• Variabel yang menunjuk ke fungsi yang ada

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

  _{Perhatikan bahwa saya mengatur "variabel dalam suatu fungsi" secara terpisah dari "nama fungsi". Tidak jelas bahwa variabel dan nama fungsi menempati namespace yang sama dan dapat saling mengalahkan.}

Melewati argumen

Untuk memanggil suatu fungsi dan melewatkan parameter, Anda dapat memanggil fungsi di dalam callback yang ditugaskan ke penghitung waktu:

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

Ada metode lain untuk meneruskan argumen ke dalam handler, namun itu tidak kompatibel lintas-browser .

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

Konteks panggilan balik

Secara default, konteks panggilan balik (nilai thisdi dalam fungsi yang disebut oleh timer) ketika dieksekusi adalah objek global window. Jika Anda ingin mengubahnya, gunakan bind.

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

Keamanan

Meskipun mungkin, Anda tidak boleh melewatkan string ke setTimeoutatau setInterval. Melewati string membuat setTimeout()atau setInterval()menggunakan fungsi yang mirip dengan eval()yang mengeksekusi string sebagai script , membuat sewenang-wenang dan berpotensi membahayakan eksekusi script mungkin.

saya pikir fungsi setTimeout yang Anda tulis tidak dijalankan. jika Anda menggunakan jquery, Anda dapat membuatnya berjalan dengan benar dengan melakukan ini:

    function alertMsg() {
      //your func
    }

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

Sepenuhnya setuju dengan Joseph.

Berikut ini biola untuk menguji ini: http://jsfiddle.net/nicocube/63s2s/

Dalam konteks biola, argumen string tidak berfungsi, menurut saya karena fungsinya tidak didefinisikan dalam lingkup global.

Apa yang terjadi dalam kenyataan jika Anda melewatkan string sebagai parameter fungsi pertama

setTimeout ( 'string', number)

adalah nilai param pertama yang dievaluasi ketika saatnya untuk dijalankan (setelah numbermilidetik berlalu). Pada dasarnya itu sama dengan

setTimeout ( eval('string'), number)

Ini adalah

sintaksis alternatif yang memungkinkan Anda untuk memasukkan string alih-alih fungsi, yang dikompilasi dan dieksekusi ketika timer berakhir. Sintaks ini tidak direkomendasikan untuk alasan yang sama yang membuat menggunakan eval () risiko keamanan.

Jadi sampel yang Anda referensikan bukan sampel yang baik, dan dapat diberikan dalam konteks yang berbeda atau hanya kesalahan ketik sederhana.

Jika Anda memanggil seperti ini setTimeout(something, number), parameter pertama bukan string, tetapi penunjuk ke sesuatu yang disebut something. Dan lagi jika somethingstring - maka akan dievaluasi. Tetapi jika itu adalah fungsi, maka fungsi akan dieksekusi. sampel 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.

Dengan tanda kurung:

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

Tanpa tanda kutip dan tanda kurung:

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

Dan yang ketiga hanya menggunakan tanda kutip:

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

Dalam contoh di atas, pertama alertMsg2 () segera memanggil fungsi (kami memberikan waktu keluar 4S tetapi tidak mengganggu) setelah itu alertMsg1 () (Waktu tunggu 2 Detik) lalu alertMsg4 () (Waktu tunggu 8 Detik) tetapi alertMsg3 () tidak berfungsi karena kami menempatkannya di dalam tanda kutip tanpa pihak sehingga diperlakukan sebagai string.