{"draftJsState":{"blocks":[{"data":{"image":{"id":"69e282815369364d5dd49fbb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"взято с ya.ru","type":"atomic:image","key":"f1omh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Повелители времени: Как setTimeout и setInterval управляют будущим (и почему это сложнее, чем кажется)","type":"header-two","key":"778q7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы когда-нибудь задумывались, как JavaScript выполняет код \"через 5 секунд\", если он однопоточный? Или почему setTimeout(fn, 0) не выполняется мгновенно? Или как остановить бесконечный интервал, который уже запущен?","type":"unstyled","key":"ee5ni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добро пожаловать в мир асинхронного планирования. setTimeout и setInterval - это два кита, на которых держится отложенное выполнение в JavaScript. Они кажутся простыми: \"запланируй эту функцию на потом\". Но за этой простотой скрывается Event Loop, макрозадачи и множество подводных камней.","type":"unstyled","key":"91tc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы разберём всё: от основ до продвинутых техник, от задержек до анимаций, от вложенных таймеров до альтернатив.","type":"unstyled","key":"a60f5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1. setTimeout: Отложенный вызов","type":"header-two","key":"7be1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setTimeout планирует выполнение функции один раз через указанное количество миллисекунд.","type":"unstyled","key":"1hfe1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1eh9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"ITALIC"},{"length":20,"offset":86,"style":"ITALIC"},{"length":9,"offset":210,"style":"ITALIC"},{"length":26,"offset":220,"style":"ITALIC"},{"length":39,"offset":247,"style":"ITALIC"}],"text":"// Базовый синтаксис\nconst timeoutId = setTimeout(function, delay, arg1, arg2, ...);\n\n// Простейший пример\nsetTimeout(() => {\n console.log(\"Прошла 1 секунда\");\n}, 1000);\n\nconsole.log(\"Это выполнится первым\");\n// Вывод:\n// \"Это выполнится первым\"\n// \"Прошла 1 секунда\" (через 1 секунду)","type":"unstyled","key":"83vtv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.1 Параметры setTimeout","type":"header-three","key":"33i4u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"df4te"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"},{"length":48,"offset":153,"style":"ITALIC"},{"length":68,"offset":203,"style":"ITALIC"}],"text":"// Передача аргументов в функцию\nfunction greet(name, age) {\n console.log(`Привет, ${name}! Тебе ${age} лет.`);\n}\n\nsetTimeout(greet, 1000, \"Анна\", 25);\n// Через 1 секунду: \"Привет, Анна! Тебе 25 лет.\"\n\n// Аргументы работают со стрелочными функциями (но там они не нужны)\nsetTimeout((name, age) => {\n console.log(`Привет, ${name}!`);\n}, 1000, \"Борис\");","type":"unstyled","key":"58det"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.2 Отмена setTimeout (clearTimeout)","type":"header-three","key":"5ca2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"a1gcf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":84,"style":"ITALIC"},{"length":53,"offset":151,"style":"ITALIC"},{"length":27,"offset":205,"style":"ITALIC"},{"length":27,"offset":388,"style":"ITALIC"}],"text":"const timeoutId = setTimeout(() => {\n console.log(\"Это не выполнится\");\n}, 5000);\n\n// Отменяем до того, как прошло 5 секунд\nclearTimeout(timeoutId);\n\n// Проверить, был ли таймер отменён, напрямую нельзя,\n// но можно обернуть в флаг\nlet cancelled = false;\nconst id = setTimeout(() => {\n if (!cancelled) {\n console.log(\"Выполнилось\");\n }\n}, 1000);\ncancelled = true;\nclearTimeout(id); // Всё равно лучше очистить","type":"unstyled","key":"5kegr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2. setInterval: Периодический вызов","type":"header-two","key":"2a4cb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setInterval планирует выполнение функции многократно через указанный интервал.","type":"unstyled","key":"380iu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"13rte"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"ITALIC"},{"length":58,"offset":286,"style":"ITALIC"}],"text":"// Базовый синтаксис\nconst intervalId = setInterval(function, delay, arg1, arg2, ...);\n\nlet count = 0;\nconst intervalId = setInterval(() => {\n count++;\n console.log(`Прошло ${count} секунд`);\n if (count === 5) {\n clearInterval(intervalId);\n console.log(\"Стоп!\");\n }\n}, 1000);\n// Каждую секунду: \"Прошло 1 секунд\", \"Прошло 2 секунд\"...","type":"unstyled","key":"76i0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.1 Остановка setInterval (clearInterval)","type":"header-three","key":"9tgtn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"dln4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":72,"style":"ITALIC"}],"text":"const intervalId = setInterval(() => {\n console.log(\"Тик\");\n}, 1000);\n\n// Через 5 секунд остановим\nsetTimeout(() => {\n clearInterval(intervalId);\n console.log(\"Интервал остановлен\");\n}, 5000);","type":"unstyled","key":"5tse4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Как это работает: Event Loop и макрозадачи","type":"header-two","key":"87p58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":101,"style":"BOLD"}],"text":"Ключевое понимание: setTimeout и setInterval не гарантируют точное время выполнения. Они гарантируют минимальную задержку.","type":"unstyled","key":"f920c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ekgcn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":124,"style":"ITALIC"},{"length":12,"offset":134,"style":"ITALIC"},{"length":11,"offset":147,"style":"ITALIC"},{"length":28,"offset":159,"style":"ITALIC"}],"text":"console.log(\"1. Начало\");\n\nsetTimeout(() => {\n console.log(\"3. setTimeout (через 0мс)\");\n}, 0);\n\nconsole.log(\"2. Конец\");\n\n// Вывод:\n// 1. Начало\n// 2. Конец\n// 3. setTimeout (через 0мс)","type":"unstyled","key":"8dtjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Почему? Даже с задержкой 0, колбэк не выполняется сразу. Он попадает в очередь макрозадач и ждёт, пока стек вызовов опустеет.","type":"unstyled","key":"7qalc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"ahui8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"ITALIC"},{"length":27,"offset":179,"style":"ITALIC"},{"length":9,"offset":249,"style":"ITALIC"},{"length":27,"offset":259,"style":"ITALIC"},{"length":61,"offset":287,"style":"ITALIC"},{"length":39,"offset":349,"style":"ITALIC"}],"text":"// Эксперимент с долгим синхронным кодом\nsetTimeout(() => {\n console.log(\"Таймер сработал через 100мс\");\n}, 100);\n\nconst start = Date.now();\nwhile (Date.now() - start < 500) {\n // Блокируем поток на 500мс\n}\nconsole.log(\"Блокировка закончилась\");\n\n// Вывод:\n// \"Блокировка закончилась\"\n// \"Таймер сработал через 100мс\" (на самом деле через 500+мс)\n// Таймер ждал, пока освободится поток!","type":"unstyled","key":"9cj22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4. Вложенные setTimeout: Анимация и рекурсия","type":"header-two","key":"d7pi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для периодических действий с динамическим интервалом или гарантией паузы между выполнениями лучше использовать рекурсивный setTimeout, а не setInterval.","type":"unstyled","key":"ebc6i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7paeb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"ITALIC"},{"length":36,"offset":142,"style":"ITALIC"},{"length":66,"offset":344,"style":"ITALIC"},{"length":74,"offset":412,"style":"ITALIC"},{"length":18,"offset":616,"style":"ITALIC"}],"text":"// setInterval - интервал между НАЧАЛАМИ выполнения\nlet count = 0;\nconst intervalId = setInterval(() => {\n console.log(`Начало ${count}`);\n // Долгая операция (например, 200мс)\n const start = Date.now();\n while (Date.now() - start < 200) {}\n console.log(`Конец ${count}`);\n count++;\n if (count === 3) clearInterval(intervalId);\n}, 100);\n// Если функция выполняется дольше интервала, вызовы накладываются\n\n// Рекурсивный setTimeout - интервал между ЗАВЕРШЕНИЕМ и следующим НАЧАЛОМ\nfunction repeat(count = 0) {\n console.log(`Начало ${count}`);\n const start = Date.now();\n while (Date.now() - start < 200) {} // долгая операция\n console.log(`Конец ${count}`);\n if (count < 2) {\n setTimeout(() => repeat(count + 1), 100);\n }\n}\nrepeat();","type":"unstyled","key":"7vrqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4.1 Анимация через setTimeout","type":"header-three","key":"f7ppv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e7t7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function animate(element, property, from, to, duration) {\n const startTime = performance.now();\n const diff = to - from;\n \n function step(now) {\n const elapsed = now - startTime;\n const progress = Math.min(1, elapsed / duration);\n const value = from + diff * progress;\n element.style[property] = value + 'px';\n \n if (progress < 1) {\n requestAnimationFrame(step);\n }\n }\n \n requestAnimationFrame(step);\n}","type":"unstyled","key":"3p0b6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 5. setTimeout с задержкой 0","type":"header-two","key":"8r77q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setTimeout(..., 0) часто используется для откладывания выполнения до завершения текущего синхронного кода.","type":"unstyled","key":"7r6hd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"8mbge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"ITALIC"},{"length":23,"offset":208,"style":"ITALIC"},{"length":29,"offset":251,"style":"ITALIC"}],"text":"// Пример: \"разблокировка\" потока для обновления UI\nfunction heavyOperation() {\n console.log(\"Начало тяжёлой операции\");\n for (let i = 0; i < 1000000000; i++) {}\n console.log(\"Конец тяжёлой операции\");\n}\n\n// Плохо - UI заморожен\nheavyOperation();\n\n// Лучше - разбиваем на части\nfunction heavyOperationAsync(chunkSize = 1000000) {\n let i = 0;\n function chunk() {\n const end = Math.min(i + chunkSize, 1000000000);\n for (; i < end; i++) {}\n if (i < 1000000000) {\n setTimeout(chunk, 0);\n }\n }\n setTimeout(chunk, 0);\n}","type":"unstyled","key":"ekjmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 6. Проблемы с setInterval","type":"header-two","key":"58vsc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.1 Накопление вызовов (backpressure)","type":"header-three","key":"1rkgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если выполнение колбэка занимает больше времени, чем интервал, вызовы накапливаются.","type":"unstyled","key":"96f7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"27eql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":22,"style":"ITALIC"},{"length":51,"offset":163,"style":"ITALIC"},{"length":55,"offset":215,"style":"ITALIC"}],"text":"setInterval(() => {\n // Этот колбэк выполняется 150мс\n const start = Date.now();\n while (Date.now() - start < 150) {}\n console.log(\"Тяжёлый колбэк\");\n}, 100);\n// Пока выполняется первый, второй уже в очереди...\n// Браузер пропускает лишние, но не всегда предсказуемо","type":"unstyled","key":"7qro3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.2 Дрейф времени (time drift)","type":"header-three","key":"dp2h3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setInterval не корректирует время. Если операция заняла 105мс при интервале 100мс, следующий вызов начнётся через 5мс после предыдущего.","type":"unstyled","key":"2bn21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"9iiim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":161,"style":"ITALIC"}],"text":"let expected = Date.now() + 100;\nsetInterval(() => {\n const drift = Date.now() - expected;\n console.log(`Отклонение: ${drift}мс`);\n expected += 100;\n}, 100);\n// Отклонение будет накапливаться","type":"unstyled","key":"3n66j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6.3 Решение: рекурсивный setTimeout","type":"header-three","key":"9225m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"45tov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function accurateInterval(fn, delay) {\n let expected = Date.now() + delay;\n \n function step() {\n const drift = Date.now() - expected;\n fn(drift);\n expected += delay;\n setTimeout(step, Math.max(0, delay - drift));\n }\n \n setTimeout(step, delay);\n}\n\naccurateInterval((drift) => {\n console.log(`Выполнение с отклонением ${drift}мс`);\n}, 1000);","type":"unstyled","key":"8n7no"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 7. setTimeout и setInterval в асинхронных контекстах","type":"header-two","key":"e5kdm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.1 Внутри промисов и async/await","type":"header-three","key":"87kov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7bmr2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"ITALIC"}],"text":"// Ожидание через setTimeout в async функции\nfunction delay(ms) {\n return new Promise(resolve => setTimeout(resolve, ms));\n}\n\nasync function demo() {\n console.log(\"Начало\");\n await delay(2000);\n console.log(\"Прошло 2 секунды\");\n await delay(1000);\n console.log(\"Ещё 1 секунда\");\n}\ndemo();","type":"unstyled","key":"4knmd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7.2 Отмена промиса с таймаутом","type":"header-three","key":"ci7fp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"2k9g9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function fetchWithTimeout(url, timeoutMs = 5000) {\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), timeoutMs);\n \n return fetch(url, { signal: controller.signal })\n .finally(() => clearTimeout(timeoutId));\n}\n\nfetchWithTimeout('/api/data', 3000)\n .then(response => response.json())\n .catch(err => {\n if (err.name === 'AbortError') {\n console.log(\"Запрос превысил таймаут\");\n }\n});","type":"unstyled","key":"6gh5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 8. Альтернативы","type":"header-two","key":"do2ip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.1 requestAnimationFrame - для анимаций","type":"header-three","key":"44bg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7jdoh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let start = null;\nlet element = document.getElementById('box');\n\nfunction step(timestamp) {\n if (!start) start = timestamp;\n const progress = timestamp - start;\n const x = Math.min(progress / 2000, 1) * 300;\n element.style.transform = `translateX(${x}px)`;\n \n if (progress < 2000) {\n requestAnimationFrame(step);\n }\n}\n\nrequestAnimationFrame(step);","type":"unstyled","key":"1mpj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8.2 Web Workers - для тяжёлых операций","type":"header-three","key":"d86uv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"89brg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"},{"length":12,"offset":176,"style":"ITALIC"}],"text":"// main.js\nconst worker = new Worker('worker.js');\nworker.postMessage({ type: 'start', data: hugeArray });\nworker.onmessage = (e) => {\n console.log('Результат:', e.data);\n};\n\n// worker.js\nself.onmessage = (e) => {\n if (e.data.type === 'start') {\n const result = heavyCalculation(e.data.data);\n self.postMessage(result);\n }\n};","type":"unstyled","key":"6pp5u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 9. Память и утечки","type":"header-two","key":"bvss8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.1 Всегда очищайте таймеры","type":"header-three","key":"57v7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"1vp13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":326,"style":"ITALIC"}],"text":"class Timer {\n constructor() {\n this.timeoutId = null;\n }\n \n start() {\n this.timeoutId = setTimeout(() => {\n console.log(\"Выполнилось\");\n }, 1000);\n }\n \n stop() {\n if (this.timeoutId) {\n clearTimeout(this.timeoutId);\n this.timeoutId = null;\n }\n }\n \n destroy() {\n this.stop();\n }\n}\n\n// В React компоненте\nuseEffect(() => {\n const timer = new Timer();\n timer.start();\n return () => timer.destroy();\n}, []);","type":"unstyled","key":"a0h81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"9.2 Замыкания и утечки памяти","type":"header-three","key":"s4fl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"bggcc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":137,"style":"ITALIC"},{"length":34,"offset":202,"style":"ITALIC"},{"length":21,"offset":355,"style":"ITALIC"},{"length":47,"offset":451,"style":"ITALIC"}],"text":"function createLeakyTimer() {\n const hugeData = new Array(1000000).fill(\"данные\");\n \n setInterval(() => {\n console.log(\"Тик\");\n // hugeData не используется, но живёт в замыкании!\n }, 1000);\n}\n// hugeData никогда не освободится\n\nfunction createSafeTimer() {\n const hugeData = new Array(1000000).fill(\"данные\");\n const result = hugeData.length; // нужна только длина\n \n setInterval(() => {\n console.log(`Размер данных: ${result}`);\n // hugeData может быть собрана сборщиком мусора\n }, 1000);\n}","type":"unstyled","key":"f8dd6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 10. Реальные кейсы","type":"header-two","key":"b63q5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.1 Дебаунс (debounce)","type":"header-three","key":"395c7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"5jkf3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":292,"style":"ITALIC"},{"length":25,"offset":460,"style":"ITALIC"}],"text":"function debounce(fn, delay) {\n let timeoutId = null;\n \n return function(...args) {\n clearTimeout(timeoutId);\n timeoutId = setTimeout(() => {\n fn.apply(this, args);\n }, delay);\n };\n}\n\nconst debouncedSearch = debounce((query) => {\n console.log(`Поиск: ${query}`);\n}, 300);\n\n// При быстром вводе вызовется только последний\ndebouncedSearch(\"a\");\ndebouncedSearch(\"ap\");\ndebouncedSearch(\"app\");\ndebouncedSearch(\"appl\");\ndebouncedSearch(\"apple\"); // только этот выполнится","type":"unstyled","key":"8a77d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.2 Троттлинг (throttle)","type":"header-three","key":"9ssha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"b1o0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function throttle(fn, limit) {\n let inThrottle = false;\n let lastArgs = null;\n let lastThis = null;\n \n function execute() {\n if (lastArgs) {\n fn.apply(lastThis, lastArgs);\n lastArgs = null;\n lastThis = null;\n setTimeout(execute, limit);\n } else {\n inThrottle = false;\n }\n }\n \n return function(...args) {\n if (!inThrottle) {\n fn.apply(this, args);\n inThrottle = true;\n setTimeout(execute, limit);\n } else {\n lastArgs = args;\n lastThis = this;\n }\n };\n}\n\nconst throttledScroll = throttle(() => {\n console.log(\"Скролл!\", Date.now());\n}, 1000);\n\nwindow.addEventListener('scroll', throttledScroll);","type":"unstyled","key":"bc26h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"10.3 Имитация серверного времени","type":"header-three","key":"7hqpa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4kj45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class VirtualClock {\n constructor(serverTime) {\n this.offset = serverTime - Date.now();\n this.listeners = [];\n }\n \n now() {\n return Date.now() + this.offset;\n }\n \n setTimeout(fn, delay) {\n const targetTime = this.now() + delay;\n const realDelay = targetTime - Date.now();\n const timeoutId = setTimeout(fn, Math.max(0, realDelay));\n return timeoutId;\n }\n \n setInterval(fn, interval) {\n let timeoutId;\n const wrapper = () => {\n fn();\n timeoutId = this.setTimeout(wrapper, interval);\n };\n timeoutId = this.setTimeout(wrapper, interval);\n \n return {\n clear: () => clearTimeout(timeoutId)\n };\n }\n}","type":"unstyled","key":"8s8t1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 11. Подводные камни","type":"header-two","key":"5qeb5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #1: Максимальная задержка","type":"header-three","key":"45plk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"775s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"ITALIC"},{"length":13,"offset":103,"style":"ITALIC"},{"length":44,"offset":117,"style":"ITALIC"}],"text":"// Задержка более 24.8 дней (2^31-1 мс) округляется\nsetTimeout(() => console.log(\"Никогда\"), 2 ** 31); // ~24.8 дней\n// Фактическая задержка: 2**31 мс (максимум)","type":"unstyled","key":"am3p9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #2: this в setTimeout","type":"header-three","key":"dt3g0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"7fu50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":100,"style":"ITALIC"},{"length":29,"offset":200,"style":"ITALIC"}],"text":"const obj = {\n name: \"Анна\",\n greet() {\n setTimeout(function() {\n console.log(this.name); // undefined (this = window)\n }, 100);\n \n setTimeout(() => {\n console.log(this.name); // \"Анна\" (стрелка сохраняет)\n }, 100);\n \n setTimeout(this.greet.bind(this), 100);\n }\n};","type":"unstyled","key":"5o561"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Камень #3: Аккумуляция setTimeout в циклах","type":"header-three","key":"e80r9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"e8810"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":27,"offset":82,"style":"ITALIC"},{"length":15,"offset":111,"style":"ITALIC"},{"length":19,"offset":200,"style":"ITALIC"},{"length":21,"offset":221,"style":"ITALIC"}],"text":"// Плохо\nfor (var i = 0; i < 5; i++) {\n setTimeout(() => console.log(i), 100);\n}\n// Вывод: 5,5,5,5,5 (все 5)\n\n// Хорошо (let)\nfor (let i = 0; i < 5; i++) {\n setTimeout(() => console.log(i), 100);\n}\n// Вывод: 0,1,2,3,4\n\n// Хорошо (замыкание)\nfor (var i = 0; i < 5; i++) {\n setTimeout(((j) => () => console.log(j))(i), 100);\n}","type":"unstyled","key":"dg907"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итог: Манифест таймеров","type":"header-two","key":"7fpdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setTimeout(fn, delay) - однократная задержка.","type":"ordered-list-item","key":"dhn54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setInterval(fn, delay) - многократное выполнение.","type":"ordered-list-item","key":"anoni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":16,"style":"BOLD"}],"text":"clearTimeout(id) / clearInterval(id) - всегда очищайте таймеры.","type":"ordered-list-item","key":"4bi4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Минимальная задержка - 4мс (после 5 вложенных таймеров в браузере).","type":"ordered-list-item","key":"2s7qd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"setTimeout(fn, 0) - не мгновенно, а после текущего синхронного кода.","type":"ordered-list-item","key":"e8it5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Для точного интервала - используйте рекурсивный setTimeout.","type":"ordered-list-item","key":"289mf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Для анимации - requestAnimationFrame, не setInterval.","type":"ordered-list-item","key":"6h1h3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Для тяжёлых операций - Web Workers.","type":"ordered-list-item","key":"ksok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Всегда очищайте таймеры при размонтировании компонентов.","type":"ordered-list-item","key":"cv7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Никогда не передавайте строку (setTimeout(\"code\", 100)) - это eval.","type":"ordered-list-item","key":"cjj05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Финальный тест (что выведет?):","type":"unstyled","key":"9noq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"unstyled","key":"4r701"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.log(\"1\");\n\nsetTimeout(() => console.log(\"2\"), 0);\n\nPromise.resolve().then(() => console.log(\"3\"));\n\nconsole.log(\"4\");\n\nlet count = 0;\nconst interval = setInterval(() => {\n count++;\n console.log(count);\n if (count === 3) clearInterval(interval);\n}, 100);\n\nsetTimeout(() => console.log(\"5\"), 50);","type":"unstyled","key":"dmqi6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Ответ: 1, 4, 3, 2, 1, 2, 3, 5 (микрозадачи - Promise - между макрозадачами).","type":"unstyled","key":"59djp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setTimeout и setInterval - это фундамент асинхронного JavaScript. Они просты на поверхности, но скрывают глубины Event Loop, очередей макрозадач и проблем синхронизации. Освойте их, и вы сможете управлять временем в ваших приложениях. А когда вам понадобится больше - requestAnimationFrame, Web Workers и промисы ждут вас. Планируйте мудро.","type":"unstyled","key":"3dorv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7c8eu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"JNQeZ8D7JOwHmDFiTpxT"}],"entityMap":{}},"mentions":[]}