Різниця між setTimeout з лапками і без дужок

Я вивчаю JavaScript, і нещодавно дізнався про події в часі JavaScript. Коли я дізнався про setTimeoutв W3Schools , я помітив дивну фігуру , яку я не біжіть в раніше. Вони використовують подвійні лапки, а потім викликають функцію.

Приклад:

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

У наведеному вище прикладі спочатку функція alarMsg2 () викликає негайно (ми даємо час виходу 4S, але це не турбує) після цього alertMsg1 () (час очікування 2 секунди), а потім alertMsg4 () (час очікування 8 секунди) але alertMsg3 () не працює, тому що ми розміщуємо його в лапках без партій, тому він трактується як рядок.