Руководство по node.js, часть 6: цикл событий, стек вызовов, таймеры

Özet

ve metodları ‘ın düzenli olarak ms aralıklar ile çalışmasını sağlar.
Çalışmayı durdurmak için fonksiyonları metodundan dönen değerler ile çağırılmalıdır.
İç içe çağrısı kullanmak ‘e göre daha esnektir. Ayrıca bu şekilde aralarda en kısa süre beklemesini sağlar.
0 gecikmeli zamanlayıcı ise zamanlayıcıyı olabildiğince çabuk fakat o anki koddan sonra çağırılacak şekilde zamanlar.

‘ın bazı kullanım durumları:

CPU-aç görevleri parçalara ayırmak için, böylece kod sürekli tepki verebilir.
Böylece görev devam ederken tarayıcının başka işlere ( ilerleme çubuğu ) zaman ayırır.

Tüm zamanlama metodları tam olarak gecikmeyi garantilemez. Zamanlayıcıda bu varsayımın üzerine birşey inşa etmeyin.

Örneğin, tarayıcı zamanı birçok nedenden ötürü yavaşlayabilir:

İşlemcinin yükü artarsa.
Tarayıcının tab’ı arka plana alındıysa.
Laptop batarya ile çalışıyorsa.

Bunların hepsi tarayıcı zamanına etki eder. Aralardaki gecikme 300ms ile 1000ms arasında değişebilir. Tabi tarayıcı ve özellikleri de bu konuda etkin rol oynar.

Рекурсивный setTimeout

Руководство по javascript, часть 5: массивы и циклы

Есть два способа запускать что-то регулярно.

Один из них . Другим является рекурсивный . Например:

Метод выше планирует следующий вызов прямо после окончания текущего .

Рекурсивный – более гибкий метод, чем . С его помощью последующий вызов может быть задан по-разному в зависимости от результатов предыдущего.

Например, необходимо написать сервис, который отправляет запрос для получения данных на сервер каждые 5 секунд, но если сервер перегружен, то необходимо увеличить интервал запросов до 10, 20, 40 секунд…
Вот псевдокод:

А если функции, которые мы планируем, ресурсоёмкие и требуют времени, то мы можем измерить время, затраченное на выполнение, и спланировать следующий вызов раньше или позже.

Рекурсивный позволяет задать задержку между выполнениями более точно, чем .

Сравним два фрагмента кода. Первый использует :

Второй использует рекурсивный :

Для внутренний планировщик будет выполнять каждые 100 мс:

Обратили внимание?

Реальная задержка между вызовами с помощью меньше, чем указано в коде!

Это нормально, потому что время, затраченное на выполнение , использует часть заданного интервала времени.

Вполне возможно, что выполнение будет дольше, чем мы ожидали, и займёт более 100 мс.

В данном случае движок ждёт окончания выполнения и затем проверяет планировщик и, если время истекло, немедленно запускает его снова.

В крайнем случае, если функция всегда выполняется дольше, чем задержка , то вызовы будут выполняться без задержек вообще.

Ниже представлено изображение, показывающее процесс работы рекурсивного :

Рекурсивный гарантирует фиксированную задержку (здесь 100 мс).

Это потому, что новый вызов планируется в конце предыдущего.

Сборка мусора и колбэк setTimeout/setInterval

Когда функция передаётся в , на неё создаётся внутренняя ссылка и сохраняется в планировщике. Это предотвращает попадание функции в сборщик мусора, даже если на неё нет других ссылок.

Для функция остаётся в памяти до тех пор, пока не будет вызван .

Есть и побочный эффект. Функция ссылается на внешнее лексическое окружение, поэтому пока она существует, внешние переменные существуют тоже. Они могут занимать больше памяти, чем сама функция. Поэтому, если регулярный вызов функции больше не нужен, то лучше отменить его, даже если функция очень маленькая.

setInterval()

Руководство по kubernetes, часть 2: создание кластера и работа с ним

function is very closely related to – they even share similar syntax:

The important difference is that, whereas triggers only once, keeps triggering again and again (unless you tell it to stop).

So when should you use it? Essentially, if you ever find yourself writing code like:

…then you should probably be using instead:

Why? Well, for one thing you don’t need to keep remembering to call at the end of your timed function. Also, when using there’s virtually no delay between one triggering of the expression and the next. With , there’s a relatively long delay while the expression is evaluated, the function called, and the new being set up. So if you need regular, precise timing – or you need to do something at, well, set intervals – is your best bet.

Отмена таймаута (clearTimeout)

Цикл for и функция range в python

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

Синтаксис отмены таймаута:

const timeoutId = window.setTimeout(...);
window.clearTimeout(timeoutId);

Данный метод () содержит один обязательный параметр — это уникальный идентификатор () таймера, который можно получить как результат вызова метода .

Например:

// запустим таймер и получим его идентификатор, который будет храниться в timeoutId
const timeoutId = window.setTimeout(() => {
  // он выведет alert с контентом 'Сообщение' через 4 секунды
  alert('Сообщение');
}, 4000);

// остановим таймер с помощью метода clearTimeout (для этого необходимо в качестве параметра данному методу передать идентификатор таймера, хранящийся в timeoutId)
clearTimeout(timeoutId);

Пример

Например, создадим на странице 2 ссылки. При нажатии на первую будет запускать функцию . Данная функция будет выводить в элемент количество секунд, прошедших с момента её нажатия. При нажатии на ссылку «Остановить таймер» будем запускать другую функцию . Она будет прекращать работу таймера с помощью метода .

<div class="seconds-wrapper">Количество секунд: <span class="seconds"></span></div>
<ul>
  <li><a href="javascript:start()">Запустить таймер</a></li>
  <li><a href="javascript:stop()">Остановить таймер</a></li>
</ul>

<script>
  // переменная, для хранения идентификатора таймера
  let timeoutId = null;

  // функция, которая будет запускать таймер
  function start() {
    // для предотвращения повторного запуска
    if (timeoutId) {
      return;
    }
    // получаем текущее время
    const startTime = new Date().getTime();
    // функция
    const run = () => {
      // определяем время, которое прошло с момента запуска функции start
      const time = new Date().getTime() - startTime;
      // получаем элемент .seconds и выводим в него значение time / 1000
      document.querySelector('.seconds').textContent = (time / 1000).toFixed(1);
      // запускаем вызов функции run через 50 мс
      timeoutId = window.setTimeout(run, 50);
    }
    // запускаем функцию run
    run();
  }

  // функция для остановки таймера по timeoutId
  function stop() {
    if (timeoutId) {
      // прекращаем работу таймера
      clearTimeout(timeoutId);
      // присваиваем переменной timeoutId значение null
      timeoutId = null;
    }
  }
</script>

Задача. Перепишите этот пример с использованием методов и .

Аргументы колбэк-функции

As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either or . The following IE-specific code demonstrates a method for overcoming this limitation. To use, simply add the following code to the top of your script.

Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:

Another possibility is to use function’s bind. Example:

Inactive tabs

Требуется Gecko 5.0(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

Starting in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), intervals are clamped to fire no more often than once per second in inactive tabs.

Примечания

The function is commonly used to set a delay for functions that are executed again and again, such as animations.

You can cancel the interval using (en-US).

If you wish to have your function called once after the specified delay, use .

If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using . For example, if using to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won’t necessarily return in order.

In these cases, a recursive pattern is preferred:

In the above snippet, a named function is declared and is immediately executed. is recursively called inside after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.

is subject to the same throttling restrictions in Firefox as ; see .

Функция sleep2sec()

function sleep2sec (a, b){
   console.log("Отложенный вызов начался")
   setTimeout(sum, 2000, a, b)
}

Передача параметров в функцию setTimeout осуществляется с третьего аргумента. То есть первым аргументом мы передаём функцию-обработчик, вторым аргументом — задержку в миллисекундах и начиная с третьего идут параметры через запятую.

В нашем случае:

Первый аргумент функции setTimeout — это функция-обработчик sum
Второй аргумент функции setTimeout — это число, которое обозначает миллисекунды — это время задержки (отложенного вызова sum)
Третий аргумент функции setTimeout — это первое передаваемое число в sum
Четвёртый аргумент функции setTimeout — это второе передаваемое число в sum

Функция sleep2sec — расписаны аргументы для setTimeout — JavaScript

Настраиваем JavaScript

Теперь, как только вы разобрались с HTML и CSS, настало время писать JavaScript код, который будет обрабатывать отрисовку анимации в . Если до этого вы не использовали Canvas API, то не беспокойтесь, я объясню всё что нужно по мере прочтения статьи.

Создайте новый файл в папке проекта под название и добавьте туда этот код:

(function() {// Get the buttons.var startBtn = document.getElementById('startBtn');var stopBtn = document.getElementById('stopBtn');var resetBtn = document.getElementById('resetBtn');// Остальной код будет тут…}());

Вы создали три переменные и ассоциировали их с кнопками из разметки.

Дальше вам надо написать немного кода, чтобы настроить Canvas. Скопируйте этот код в свой файл.

// Canvasvar canvas = document.getElementById('stage');// 2d контекст отрисовки.var ctx = canvas.getContext('2d');// Стиль наполнения для контекста отрисовки.ctx.fillStyle = '#212121';// Переменная в которой будет храниться requestID.var requestID;// Переменные для отрисовки позиций и объекта.var posX = 0;var boxWidth = 50;var pixelsPerFrame = 5; // Количество пикселей, на которое должен двинуться блок в каждом кадре.// Отрисовка изначального блока в canvas.ctx.fillRect(posX, 0, boxWidth, canvas.height);

Тут сначала мы создаем переменную под названием сanvas и ассоциируем её с элементом из разметки. Далее вы задаёте 2d контекст отрисовки для него. Это даёт нам методы для отрисовки объектов на нём, так же как и методы контроля стилей этих объектов.

Следующая строка кода выставляет свойству для контекста отрисовки .

переменная будет использоваться, чтобы отслеживать , возвращенный методом .

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

Под конец вы вызываете контекст отрисовки методом , передав ему X и Y координаты положения прямоугольника вместе с его высотой и шириной.

setInterval

The method has the same syntax as :

All arguments have the same meaning. But unlike it runs the function not only once, but regularly after the given interval of time.

To stop further calls, we should call .

The following example will show the message every 2 seconds. After 5 seconds, the output is stopped:

Time goes on while is shown

In most browsers, including Chrome and Firefox the internal timer continues “ticking” while showing .

So if you run the code above and don’t dismiss the window for some time, then the next will be shown immediately as you do it. The actual interval between alerts will be shorter than 2 seconds.

Оставляя тайм-ауты позади

Помните, что и возвращают объект .
У объекта есть два метода, чтобы расширить свое поведение, это
и . Если есть объект , запланированный с использованием функции ,
то для этого объекта может быть вызвана . Это немного изменит поведение тем, что объект
не выполнит запланированный код, если это последний код, который нужно выполнить. Объект
не будет удерживать процесс в ожидании выполнения.

Аналогичным образом, объект , на котором был вызван ,
может убрать это поведение, вызвав на том же объекте, что затем
обеспечит его выполнение. Однако имейте в виду, что это не точно восстанавливает
исходное поведение по причинам производительности. Давайте взглянем на примеры ниже:

Замечания

Отложенное выполнение кода можно отменить, используя . Если функция должна вызываться неоднократно (например, каждые N миллисекунд), необходимо использовать .

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

Передача строки вместо функции в сопряжена с теми же опасностями, что и использование

String literals are evaluated in the global context, so local symbols in the context where was called will not be available when the string is evaluated as code.

browsers implement «clamping»: successive calls with smaller than the «minimum delay» limit are forced to use at least the minimum delay. The minimum delay, , is 4 ms (stored in a preference in Firefox: ), with a of 5ms.

In fact, 4ms is and is consistent across browsers released in 2010 and onward. Prior to (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the minimum timeout value for nested timeouts was 10 ms.

In addition to «clamping», the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.

To implement a 0 ms timeout in a modern browser, you can use as described here.

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

Неактивные вкладки

In (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see баг 633421 for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

Passing Parameters to setTimeout

In a basic scenario, the preferred, cross-browser way to pass parameters to a callback executed by is by using an anonymous function as the first argument.

In the following example, we select a random animal from an array and pass this random animal as a parameter to a function. The function is then executed by with a delay of one second:

Note: I’ve used a regular function () to return a random element from an array. It would also be possible to write this as a function expression using an arrow function:

We’ll get to arrow functions in the next section.

An Alternative Method

As can be seen from the , there’s a second method of passing parameters to a callback executed by . This involves listing any parameters after the delay.

With reference to our previous example, this would give us:

Unfortunately, this doesn’t work in IE9 or below, where the parameters come through as . If you’re in the unenviable position of having to support IE9, there is .

Usage notes

The function is commonly used to set a delay for functions
that are executed again and again, such as animations. You can cancel the interval using
.

If you wish to have your function called once after the specified delay, use
.

It’s possible for intervals to be nested; that is, the callback for
can in turn call to start another
interval running, even though the first one is still going. To mitigate the potential
impact this can have on performance, once intervals are nested beyond five levels deep,
the browser will automatically enforce a 4 ms minimum value for the interval. Attempts
to specify a value less than 4 ms in deeply-nested calls to
will be pinned to 4 ms.

Browsers may enforce even more stringent minimum values for the interval under some
circumstances, although these should not be common. Note also that the actual amount of
time that elapses between calls to the callback may be longer than the given
; see
in WindowOrWorkerGlobalScope.setTimeout() for examples.

If there is a possibility that your logic could take longer to execute than the
interval time, it is recommended that you recursively call a named function using
. For example, if
using to poll a remote server every 5 seconds, network
latency, an unresponsive server, and a host of other issues could prevent the request
from completing in its allotted time. As such, you may find yourself with queued up XHR
requests that won’t necessarily return in order.

In these cases, a recursive pattern is preferred:

In the above snippet, a named function is declared and is
immediately executed. is recursively called inside
after the logic has completed executing. While this pattern
does not guarantee execution on a fixed interval, it does guarantee that the previous
interval has completed before recursing.

Как не надо пытаться исправить ситуацию

Спустя некоторое время выявляется нестабильный тест, который нужно исправить. Большинству разработчиков на ум сразу же приходят казалось бы очевидные решения, но на практике они не работают. Сразу покажу, на какие грабли не следует наступать, если выявилась нестабильность теста.

Не следует пытаться отсрочить исполнение callback-а внутри теста, пытаясь увеличить значение таймаута при вызове setTimeout/setInterval («сейчас я напишу 1001 вместо 101, и это мне поможет»). Это не поможет.
Не следует пытаться использовать вложенные вызовы setTimeout() в тесте («сейчас я перекину этот вызов в следующий event loop, и это мне поможет»). Это также не поможет.
(Если вы все же решили проигнорировать пункты 1 и 2) Не следует увеличивать — эта порочная практика быстро смаштабируется на другие тесты, что в итоге приведет к увеличению общего времени тестирования, а стабильности при этом не прибавится.

setTimeout и setInterval

В JavaScript имеются методы, которые позволяют вызвать функцию не сразу, а через некоторый промежуток времени (в асинхронном режиме). Называются они и .

Отличаются они друг от друга лишь тем, что выполняет вызов функции всего один раз, а – постоянно через указанный интервал времени.

Синтаксис и :

// setTimeout
window.setTimeout(func  );
// setInterval
window.setTimeout(func  );

Параметры:

– функция, которую нужно вызвать спустя указанное в количество миллисекунд;
– количество миллисекунд по истечении которых нужно выполнить ;
– дополнительные аргументы, которые нужно передать в .

Например, вызовем функцию один раз по прошествии 3 секунд:

// функция
function myFunc() {
  console.log('after 3 seconds');
}

// вызовем функцию myFunc после 3 секунд
window.setTimeout(myFunc, 3000);
// выведем сообщение в консоль
console.log('immediately');

При выполнение этого кода программа не остановится на месте, где мы зарегистрировали некоторую асинхронность посредством и не будет блокировать её дальнейшее выполнение на 3 секунды, через которые нужно будет вызвать . Выполнение скрипта продолжится дальше и сначала браузер выведет в консоль сообщение «immediately», а затем через 3 секунды – «after 3 seconds».

Другими словами, когда браузер доходит до исполнения , он как бы помещает функцию в некоторое место, а затем по прошествии определённого количества времени её вызывает. При этом блокировка основного потока выполнения программы не происходит.

Чтобы более подробно разобраться в этом необходимо рассмотреть, как движок JavaScript выполняет синхронный и асинхронный код, а также что такое event loop и как он работает.

Синхронный и асинхронный код

Но перед тем, как переходить к асинхронными операциям, следует сначала в общих чертах разобраться как выполняется синхронный код.

Выполнение такого кода движок JavaScript выполняет последовательно (т.е. строчку за строчкой). При этом перед тем, как выполнить какую-то строчку кода интерпретатор сначала помещает её в стек вызовов (call stack). Именно в нём происходит её разбор и исполнение. После этого происходит её извлечение из стека и переход к следующей строчке.

Но всё меняется, когда интерпретатор доходит до выполнения асинхронных операций, например . Они также как и синхронные операции сначала попадают в стек вызовов, где происходит их разбор. Но, при разборе интерпретатор понимает, что это некоторый вызов Web API и помещает эту операцию в него. После этого он удаляет эту строчку из call stack и переходит к выполнению следующей строчки кода.

В это же время Web API регистрирует эту функцию и запускает таймер. Как только он завершается, он помещает эту функцию в очередь (callback queue). Очередь – это структура данных типа FIFO. Она хранит все функции в том порядке, в котором они были туда добавлены.

Очередь обратных вызовов (callback queue) обрабатывает цикл событий (event loop). Он смотрит на эту очередь и на стек вызовов (call stack). Если стек вызовов пуст, а очередь нет – то он берёт первую функцию из очереди и закидывает её в стек вызовов, в котором она уже выполняется. Вот таким образом происходит выполнения асинхронного кода в JavaScript.

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

window.setInterval(myFunc, 3000);

Пример, с передачей функции аргументов:

function sayHello(name) {
  alert(`Привет, ${name}!`);
}
setTimeout(sayHello, 3000, 'Василий'); // Привет, Василий!

Пример, с использованием в анонимной функции:

setTimeout(function (name) {
  alert(`Привет, ${name}!`);
}, 3000, 'Василий');

В и можно также вместо функции передавать строку с кодом, который нужно выполнить через определённый интервал времени. Но этот вариант использовать не рекомендуется по тем же причинам, что и функцию .

Если функция по каким-то причинам не работает, то проверьте действительно ли вы передаёте ссылку на функцию, а неё результат:

function sayHello() {
  console.log('Привет!');
}

// передаём в setTimeout не ссылку на функцию sayHello, а результат её вызова
setTimeout(sayHello(), 3000);

Let’s see Interval time methods

setTimeout
setInterval

Example of setTimeout method

This example will demostrate you how use this setTimeout function.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>
$(document).ready(function(){
    $("#btn-timout").click(function(){
       setTimeout("alert('Hello World!');", 4000);
    });
});
</script>
</head>
<body>
<div class="common_box_body">
<button id="btn-timout">Click</button>
<p>Click the above given button and wait for 4 seconds. After 4 second will come alert box</p>
</div>
</body>
</html>

Click

Click the above given button and wait for 4 seconds. After 4 second will come alert box

Example of setInterval method

This example will demostrate you how use this setInterval function.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>
$(document).ready(function(){
    $("#btn-interval").click(function(){
       setInterval("alert('Hello World!');", 4000);
    });
});
</script>
</head>
<body>
<div class="common_box_body">
<button id="btn-interval">Click</button>
<p>Click the above given button and wait for 4 seconds. After 4 second will come alert box continuously</p>
</div>
</body>
</html>

Click

Click the above given button and wait for 4 seconds. After 4 second will come alert box continuously

To Remember

The setInterval function performs again and again in the given interval time.
The setTimeout function is executed only once in given intervals time.
In both functions, 1000 ms = 1 seconds.

jQuery | Event MouseUp () By Example
Event jQuery Mouseleave By Example
jQuery Event Mouseenter Example
Event jQuery MouseOver() & MouseOut By Example
keyup jquery event example
Jquery Click() Event Method with E.g.
Event jQuery. Blur By Example
jQuery form submit event with example
keydown function jQuery
List of jQuery Events Handling Methods with examples
Jquery Selector by .class | name | #id | Elements
How to Get the Current Page URL in jQuery
jQuery Ajax Get() Method Example
get radio button checked value jquery by id, name, class
jQuery Set & Get innerWidth & innerHeight Of Html Elements
jQuery Get Data Text, Id, Attribute Value By Example
Set data attribute value jquery
select multiple class in jquery
How to Remove Attribute Of Html Elements In jQuery
How to Checked Unchecked Checkbox Using jQuery
jQuery removeClass & addClass On Button Click By E.g.
To Remove whitespace From String using jQuery
jQuery Ajax Post() Method Example
jQuery Ajax Get() Method Example
To Load/Render html Page in div Using jQuery Ajax $.load

Как же написать тест хорошо?

Это вопрос многогранный, и все зависит от того, насколько вы готовы вложится в исправление ситуации. Я приведу несколько примеров, как это можно сделать, в порядке моей субъективной оценки: от более правильных вариантов к менее правильным. Но вы вправе руководствоваться вашей собственной системой ценностей.

Убрать асинхронность из теста путем значительного рефакторинга кода — т.е. сделать код пригодным для тестирования.
В указанном примере выносим код, меняющий состояние экземпляра, в отдельную функцию:

которую и тестируем:

Естественно этот пример сильно упрощен, мы получается вообще не тестируем вызов setProperState внутри methodToTest (методику для такого теста можно увидеть в следующем примере). В реальной жизни все намного сложнее, но общий смысл не меняется: декомпозируйте и упрощайте код, пытайтесь тестировать чистые функции. Да, это требует значительной переработки архитектуры, но оно стоит того.
Убрать асинхроность через внедрение зависимости, что также потребует рефакторинга, но менее затратного.
Например, предоставим возможность заменить реализацию функции setTimeout на свою:

В этом случае в тесте внедряется мок-функция, код становится синхронным:
Оставить асинхронность, но использовать Promise.
Не пытайтесь в тесте подгадать момент, когда можно проверять состояние — ведь у вас уже есть готовое решение для того, чтобы точно знать об этом. А Мокка отлично . Но это тоже потребует переписывания кода. В нашем примере переписываем метод:

и тестируем его без использования setTimeout:

Да, асинхронность в этом случае осталась и тест может не вписываться в отведенное ему время, но это сильно лучше, чем «гадать на кофейной гуще». Следующим логичным шагом может быть внедрение периода задержки для setTimeout в виде опции конструктора, например.

И в тестах это время следует просто установить на минимум.
Использовать fake timers.
Пакет Sinon.JS имеет готовое решение для работы с таймерами, которое превращает асинхронный стек в синхронный. Данный подход позволяет вам не вносить какие-либо изменения в тестируемый код вообще (в идеале), а просто подменить реализацию setTimeout из теста.
В исходном примере оставляем код как есть:

А в тесте используем fake timer, при этом тест становится синхронным(!):

При использовании такого подхода не забывайте восстанавливать все «как было» через вызов clock.restore(), иначе рискуете испортить тесты соседа.

Функция sum()

function sum (x, y){
   console.log(`Сумма чисел: ${x + y}`)
}

Функция sum() — JavaScript

Эта функция выводит строку в консоль браузера. В этой строке есть статичная часть «Сумма чисел: «, которая не изменяется. Также есть динамичная часть «${x + y}«, которая отображает сумму двух чисел (или результат конкатенации строк) — эта часть всегда высчитывается в момент вызова работы функции.

Эта функция работает с двумя аргументами, поэтому в неё нужно передавать два параметра — два числа для сложения. Под «x» будет первое число, а под «y» — второе.

Мы хотим понять, каким образом можно передавать эти параметры (x, y) для вызова функции sleep2sec. То есть нам нужно сделать так, чтобы сначала передать два числа в функцию sleep2sec, а потом эти наши два числа каким-то образом пробросились внутрь функции setTimeout., а после неё пробросились во вложенную функцию sum.

Методы setInterval и clearInterval

Метод предназначен для вызова кода на языке JavaScript через указанные промежутки времени. Он в отличие от метода будет вызвать код до тех пор, пока Вы не остановите этот таймер.

Метод setInterval имеет два обязательных параметра:

1 параметр представляет собой строку, содержащую код на языке JavaScript (например, вызов функции);
2 параметр задаёт интервал времени в миллисекундах, через который данный код будет вызываться.

Для прекращения работы данного таймера предназначен метод , которому в качестве параметра необходимо передать уникальный идентификатор () таймера. Этот идентификатор можно получить при установке таймера, т.е. его возвращает метод . Также таймер прекращает свою работу при закрытии окна.

//запустим таймер и получим его идентификатор, который будет храниться в переменной timer1
//данный таймер будет выводить сообщение через каждые 5 секунд
var timer1 = window.setInterval("alert('Сообщение');",5000);
//остановим работу таймера с помощью метода clearInterval().
//Для этого в качестве параметра данному методу передадим идентификатор таймера, хранящийся в переменной timer1.
clearInterval(timer1);

Например, создадим цифровые часы:

<p id="clock"></p>
<a href="javaScript:startClock()">3anycтить таймер</a>
<br />
<a href="javaScript:stopClock()">Остановить таймер</a>

<script>
  // переменная, для хранения идентификатора таймера
  let timeoutId = null;
  // для предотвращения повторного запуска
  let hasStarting = false;

  // функция, которая будет запускать таймер
  function start() {
    // для предотвращения повторного запуска
    if (hasStarting) {
      return;
    }
    hasStarting = true;
    // получаем текущее время
    const startTime = new Date().getTime();
    // функция
    const run = () => {
      // определяем время, которое прошло с момента запуска функции start
      const time = new Date().getTime() - startTime;
      // получаем элемент .seconds и выводим в него значение time / 1000
      document.querySelector('.seconds').textContent = (time / 1000).toFixed(1);
      // запускаем вызов функции run через 50 мс
      timeoutId = window.setTimeout(run, 50);
    }
    // запускаем функцию run
    run();
  }

  // функция для остановки таймера по timeoutId
  function stop() {
    if (timeoutId) {
      // прекращаем работу таймера
      clearTimeout(timeoutId);
      // присваиваем переменной timeoutId значение null
      timeoutId = null;
      // присваиваем hasStarting значение false
      hasStarting = false;
    }
  }
</script>