Sự khác biệt giữa setTimeout có và không có dấu ngoặc kép và dấu ngoặc đơn

Tôi đang học JavaScript và gần đây tôi đã học về các sự kiện thời gian JavaScript. Khi tôi học được về setTimeoutở W3Schools , tôi nhận thấy một nhân vật kỳ lạ mà tôi không chạy vào trước đó. Họ đang sử dụng dấu ngoặc kép và sau đó gọi hàm.

Thí dụ:

setTimeout("alertMsg()", 3000);

Tôi biết rằng dấu ngoặc kép và dấu ngoặc đơn trong JavaScript có nghĩa là một chuỗi.

Ngoài ra tôi thấy rằng tôi có thể làm như vậy:

setTimeout(alertMsg, 3000);

Với các dấu ngoặc đơn mà nó đề cập, không có dấu ngoặc đơn, nó được sao chép. Khi tôi đang sử dụng dấu ngoặc kép và dấu ngoặc đơn, nó sẽ trở nên điên rồ.

Tôi sẽ rất vui nếu ai đó có thể giải thích cho tôi sự khác biệt giữa ba cách sử dụng này setTimeout:

Với dấu ngoặc đơn:

setTimeout("alertMsg()", 3000);

Không có dấu ngoặc kép và dấu ngoặc đơn:

setTimeout(alertMsg, 3000);

Và thứ ba chỉ sử dụng dấu ngoặc kép:

setTimeout("alertMsg", 3000);

NB: Một nguồn tốt hơn để setTimeouttham khảo sẽ là MDN .

Sử dụng setIntervalhoặcsetTimeout

Bạn nên chuyển một tham chiếu đến một hàm làm đối số đầu tiên cho setTimeouthoặc setInterval. Tài liệu tham khảo này có thể ở dạng:

• Một chức năng ẩn danh

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

• Tên của một chức năng hiện có

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

• Một biến chỉ đến một chức năng hiện có

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

  _{Xin lưu ý rằng tôi đặt "biến trong một hàm" tách biệt với "tên hàm". Không rõ ràng rằng các biến và tên hàm chiếm cùng một không gian tên và có thể ghi đè lên nhau.}

Tranh luận

Để gọi một hàm và truyền tham số, bạn có thể gọi hàm bên trong hàm gọi lại được gán cho bộ hẹn giờ:

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

Có một phương pháp khác để chuyển các đối số vào trình xử lý, tuy nhiên nó không tương thích với nhiều trình duyệt .

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

Bối cảnh gọi lại

Theo mặc định, ngữ cảnh của hàm gọi lại (giá trị thisbên trong hàm được gọi bởi bộ định thời) khi được thực thi là đối tượng toàn cục window. Nếu bạn muốn thay đổi nó, sử dụng bind.

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

Bảo vệ

Mặc dù có thể, bạn không nên chuyển một chuỗi đến setTimeouthoặc setInterval. Đi qua một chuỗi làm setTimeout()hoặc setInterval()sử dụng một chức năng tương tự để eval()mà thực thi chuỗi như kịch bản , làm cho độc đoán và có khả năng gây hại thực hiện kịch bản tốt.

Tôi nghĩ rằng hàm setTimeout mà bạn viết không được chạy. nếu bạn sử dụng jquery, bạn có thể làm cho nó chạy chính xác bằng cách thực hiện điều này:

    function alertMsg() {
      //your func
    }

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

Hoàn toàn đồng ý với Joseph.

Đây là một mẹo để kiểm tra điều này: http://jsfiddle.net/nicocube/63s2s/

Theo ngữ cảnh của fiddle, đối số chuỗi không hoạt động, theo ý kiến ​​của tôi vì hàm này không được xác định trong phạm vi toàn cục.

Điều gì xảy ra trong thực tế trong trường hợp bạn truyền chuỗi dưới dạng tham số đầu tiên của hàm

setTimeout ( 'string', number)

là giá trị của param đầu tiên được đánh giá khi đến lúc chạy (sau khi numbermiliseconds trôi qua). Về cơ bản nó bằng

setTimeout ( eval('string'), number)

Đây là

một cú pháp thay thế cho phép bạn bao gồm một chuỗi thay vì một hàm, được biên dịch và thực thi khi hết giờ. Cú pháp này không được khuyến nghị vì những lý do tương tự khiến việc sử dụng eval () trở thành rủi ro bảo mật.

Vì vậy, các mẫu mà bạn giới thiệu không phải là mẫu tốt và có thể được cung cấp trong các ngữ cảnh khác nhau hoặc chỉ là lỗi đánh máy đơn giản.

Nếu bạn gọi như thế này setTimeout(something, number), tham số đầu tiên không phải là chuỗi, mà là con trỏ tới một cái gì đó được gọi something. Và một lần nữa nếu somethinglà chuỗi - thì nó sẽ được đánh giá. Nhưng nếu đó là chức năng, thì chức năng sẽ được thực thi. mẫu 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.

Với dấu ngoặc đơn:

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

Không có dấu ngoặc kép và dấu ngoặc đơn:

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

Và thứ ba chỉ sử dụng dấu ngoặc kép:

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

Trong ví dụ trên, hàm alertMsg2 () đầu tiên gọi ngay lập tức (chúng tôi sẽ hết thời gian 4S nhưng nó không làm phiền) sau cảnh báo đóMsg1 () (Đợi thời gian là 2 giây) rồi alertMsg4 () (Thời gian chờ là 8 giây) nhưng alertMsg3 () không hoạt động vì chúng tôi đặt nó trong dấu ngoặc kép mà không có bên nào nên nó được coi là một chuỗi.