Рубрики
Без рубрики

Как SetTimeout вызывает функцию обратного вызова в браузере?

Утверждение: JavaScript выполняется в браузере (но не в веб -работнике). Все в JavaScript Wor … Tagged with JavaScript, HTML, WebDev, новички.

Утверждение: JavaScript выполняется в браузере (но не в веб -работнике).

Все в JavaScript World знают window.settimeout Метод, но давайте быстро обновим.

Один из действительных вариантов для этого метода имеет следующий синтаксис (далее в тексте я буду опускать Object часть и оставьте только settimeout ):

setTimeout(function[, delay, param1, param2, …])

Метод содержит один необходимый параметр, который должен быть функцией, также известной как обратный вызов.

Кроме того, есть несколько дополнительных параметров (внутри [] Кронштейн в приведенном выше фрагменте кода). Первый необязательный параметр – это задержка в MS после того, как будет вызовет обратный вызов. Второе и последующее необязательные параметры будут переданы в качестве аргументов в функции обратного вызова.

Пример:

const add = function(a,b){
  console.log(a+b)
};

setTimeout(add,1000,1,2);

// 3 (in a second)

Простой! Но как насчет печально известного это ключевое слово?

Как мы знаем это Внутри функций, не относящихся к воротам, определяется динамически ( Это зависит от того, как мы называем функцию). Но в приведенном выше примере мы сами не вызовываем функцию обратного вызова. Здесь я имею в виду, что мы не печатаем добавлять() (имя функции добавить с скобкой () ). Вместо этого мы передаем функцию Добавить как аргумент settimeout а затем settimeout называет это. На самом деле из нашего кода мы не знаем, как settimeout вызывает обратный вызов, потому что мы не создаем settimeout Анкет Это предопределено платформой (в нашем случае это браузер).

Давайте сначала посмотрим на другой пример:

const add = function(a,b){
  console.log(a+b,this)
};

const hoc = function(f,a,b){
  f(a,b)
};

hoc(add,1,2);

// 3,window (in non-strict mode)
// 3,undefined (in strict mode)

В этом примере функция Добавить это функция обратного вызова, которая передается как аргумент hoc функция Но теперь мы создаем функцию hoc и написать вызов обратного вызова внутри hoc сами (Мы набираем скобку () ). Так что все работает, как мы ожидаем. Функция Добавить называется «нормальной» функцией и это определяется как окно в безразмерном режиме или как Не определен в строгом режиме Анкет

Вернемся к settimeout Анкет Можем ли мы сказать, что settimeout вызывает функцию обратного вызова и устанавливает это так же, как мы только что видели? ” Да, будет неправильным ответом.

Это похоже на идеальное время, чтобы заглянуть внутрь спецификации 📕

settimeout Метод не является частью JS Spec (ECMA-262) но часть HTML5 Spec И оказывается, что этот метод имеет свое собственное правило, чтобы вызвать принятый обратный вызов.

Правило выглядит так:

Вызвать функцию. Используйте третий и последующий аргументы метода (если есть) в качестве аргументов для вызова функции. Используйте Метод контекст прокси как обратный вызов это ценность.

Звучит профессионально, но что такое Метод контекст прокси ? Не беспокойтесь, в браузере (но не на рабочем) Метод контекст прокси это просто окно объект.

Таким образом, после задержки обратный вызов установленного времени вызывает явно данный это ценность. Приемлемо думать, что обратный вызов называется таким образом:

function setTimeout(callback, delay, param3, param4, ...){
  // timer is count up passed delay and then
  callback.call(window, param3, param4, ...)
}

Можно сделать вывод, что settimeout не учитывает режим (строгий или не строгий) наш код запускается, но устанавливает это как окно Во время вызова обратного вызова.

Пример (супер строгий режим):

'use strict'

const add = function(a,b){ 
  'use strict'
  console.log(a+b, this)
};

setTimeout(add,1000,1,2);

// 3, window (in a second)

Вместо заключения:

  • settimeout не является частью спецификации JavaScript и определяется платформой;
  • settimeout не учитывает тип режима (строгий или не строгий). Он вызывает обратный вызов функции без ворота и устанавливает это к окно объект в браузере (но не в веб -работнике);
  • SetInterval имеет то же правило для этого в обратном вызове;
  • В случае, если обратный вызов – это функция стрелки или связанная функция , это определяется, как и ожидалось – статическим образом;
  • Сохраняйте спокойствие и читайте характеристики:) 📕📗📘

Оригинал: “https://dev.to/smlka/easyspec-how-does-settimeout-invoke-a-callback-function-in-a-browser-44kh”

Читайте ещё по теме: