Разница между 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 () не работает, потому что мы помещаем его в кавычки без сторон, поэтому он рассматривается как строка.