{"id":9471,"date":"2026-09-24T09:00:00","date_gmt":"2026-09-24T09:00:00","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=9471"},"modified":"2026-09-25T15:25:17","modified_gmt":"2026-09-25T15:25:17","slug":"tajmer-osobennosti-razrabotki-i-primer-koda","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/tajmer-osobennosti-razrabotki-i-primer-koda\/","title":{"rendered":"\u0422\u0430\u0439\u043c\u0435\u0440 \u0432 JavaScript: \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0447\u0435\u0442\u0430"},"content":{"rendered":"

\u0422\u0430\u0439\u043c\u0435\u0440 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/strong> — \u044d\u0442\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043a\u043e\u0434 \u043d\u0435 \u0441\u0440\u0430\u0437\u0443, \u0430 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f (\u043e\u0434\u0438\u043d \u0440\u0430\u0437) \u0438\u043b\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442 \u0435\u0433\u043e \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u043c. \u0412 JavaScript \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430: setTimeout<\/code> (\u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a), setInterval<\/code> (\u043f\u043e\u0432\u0442\u043e\u0440) \u0438 requestAnimationFrame<\/code> (\u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u043a\u0430\u0434\u0440\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435). \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u043d\u0438\u0445 — \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f, \u0430 \u043d\u0435 \u0442\u043e\u0447\u043d\u0430\u044f: \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u043d\u0435 \u0440\u0430\u043d\u044c\u0448\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0437\u0436\u0435.<\/p>\n

\n

\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/strong><\/p>\n

    \n
  1. \u041c\u0438\u043d\u0438-\u0441\u043b\u043e\u0432\u0430\u0440\u044c<\/a><\/li>\n
  2. setTimeout \u0438 clearTimeout: \u0437\u0430\u043f\u0443\u0441\u043a \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u043e\u0442\u043c\u0435\u043d\u0430<\/a><\/li>\n
  3. \u041f\u043e\u0442\u0435\u0440\u044f this \u0432 \u043a\u043e\u043b\u0431\u044d\u043a\u0435 \u0442\u0430\u0439\u043c\u0435\u0440\u0430<\/a><\/li>\n
  4. setInterval \u0438 clearInterval: \u043f\u043e\u0432\u0442\u043e\u0440 \u0441 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u043c<\/a><\/li>\n
  5. \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 setTimeout \u043f\u0440\u043e\u0442\u0438\u0432 setInterval<\/a><\/li>\n
  6. \u041d\u0443\u043b\u0435\u0432\u0430\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/a><\/li>\n
  7. \u041f\u0430\u0443\u0437\u0430 \u0447\u0435\u0440\u0435\u0437 await<\/a><\/li>\n
  8. \u041f\u0440\u0438\u043c\u0435\u0440: \u0442\u0430\u0439\u043c\u0435\u0440 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0447\u0435\u0442\u0430<\/a><\/li>\n
  9. requestAnimationFrame: \u0442\u0430\u0439\u043c\u0435\u0440 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/a><\/li>\n
  10. \u041a\u0430\u043a\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c<\/a><\/li>\n
  11. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  12. \u0413\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \/ \u0441\u0432\u044f\u0437\u044c \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439<\/a><\/li>\n
  13. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0438\u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u044b \u0432 Node.js 24 LTS; \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b (DOM, requestAnimationFrame<\/code>) \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n

    \u041c\u0438\u043d\u0438-\u0441\u043b\u043e\u0432\u0430\u0440\u044c<\/h2>\n\n\n\n\n\n\n\n\n
    \u0422\u0435\u0440\u043c\u0438\u043d<\/th>\n\u0427\u0442\u043e \u044d\u0442\u043e<\/th>\n\u041f\u0440\u0438\u043c\u0435\u0440<\/th>\n<\/tr>\n<\/thead>\n
    \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 (delay)<\/td>\n\u0412\u0440\u0435\u043c\u044f \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \u0434\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430, 1000 \u043c\u0441 = 1 \u0441<\/td>\nsetTimeout(fn, 1000)<\/code><\/td>\n<\/tr>\n
    \u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0442\u0430\u0439\u043c\u0435\u0440\u0430<\/td>\n\u0422\u043e, \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u044b\u0437\u043e\u0432; \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043e\u0442\u043c\u0435\u043d\u044b<\/td>\nconst id = setTimeout(...)<\/code><\/td>\n<\/tr>\n
    \u0418\u043d\u0442\u0435\u0440\u0432\u0430\u043b<\/td>\n\u041f\u0435\u0440\u0438\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043c\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0442\u0430\u0439\u043c\u0435\u0440\u0430<\/td>\nsetInterval(fn, 1000)<\/code><\/td>\n<\/tr>\n
    \u0426\u0438\u043a\u043b \u0441\u043e\u0431\u044b\u0442\u0438\u0439 (event loop)<\/td>\n\u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0435\u0440\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438\u0437 \u043e\u0447\u0435\u0440\u0435\u0434\u0438, \u043a\u043e\u0433\u0434\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u0434 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b \u0440\u0430\u0431\u043e\u0442\u0443<\/td>\n\u043a\u043e\u043b\u0431\u044d\u043a \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0436\u0434\u0435\u0442 \u0441\u0432\u043e\u0435\u0439 \u043e\u0447\u0435\u0440\u0435\u0434\u0438<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432 \u043d\u0435 \u0432\u0445\u043e\u0434\u044f\u0442 \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 ECMAScript: \u0438\u0445 \u0434\u0430\u0435\u0442 \u0441\u0440\u0435\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 HTML, Node.js — \u0441\u0432\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c timers<\/code>). \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0434\u0435\u0442\u0430\u043b\u044f\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f, \u043d\u0438\u0436\u0435 \u044d\u0442\u043e \u043e\u0433\u043e\u0432\u043e\u0440\u0435\u043d\u043e.<\/p>\n

    setTimeout \u0438 clearTimeout: \u0437\u0430\u043f\u0443\u0441\u043a \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u043e\u0442\u043c\u0435\u043d\u0430<\/h2>\n

    \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441: setTimeout(\u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430, ...\u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b)<\/code>. \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u0412\u044b\u0437\u043e\u0432 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 clearTimeout(id)<\/code> \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a.<\/p>\n

    function<\/span> <\/span>greet<\/span>(<\/span>name<\/span>, <\/span>punctuation<\/span>) {<\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>`\u041f\u0440\u0438\u0432\u0435\u0442, ${<\/span>name<\/span>}${<\/span>punctuation<\/span>}`<\/span>);<\/span>\n}<\/span>\n\nconst<\/span> <\/span>t1<\/span> <\/span>=<\/span> <\/span>setTimeout<\/span>(<\/span>greet<\/span>, <\/span>1000<\/span>, <\/span>\"\u0410\u043d\u043d\u0430\"<\/span>, <\/span>\"!\"<\/span>);   <\/span>\/\/ \u0447\u0435\u0440\u0435\u0437 ~1 \u0441<\/span>\nconst<\/span> <\/span>t2<\/span> <\/span>=<\/span> <\/span>setTimeout<\/span>(<\/span>greet<\/span>, <\/span>500<\/span>, <\/span>\"\u0411\u043e\u0440\u0438\u0441\"<\/span>, <\/span>\".\"<\/span>);   <\/span>\/\/ \u0447\u0435\u0440\u0435\u0437 ~0,5 \u0441<\/span>\n\nclearTimeout<\/span>(<\/span>t2<\/span>);                                   <\/span>\/\/ \u0411\u043e\u0440\u0438\u0441 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>\"\u0422\u0430\u0439\u043c\u0435\u0440\u044b \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u044b\"<\/span>);<\/span><\/code><\/pre>\n
    \u0412\u044b\u0432\u043e\u0434:<\/p>\n
    \u0422\u0430\u0439\u043c\u0435\u0440\u044b \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u044b\n\u041f\u0440\u0438\u0432\u0435\u0442, \u0410\u043d\u043d\u0430!\n<\/code><\/pre>\n
    \u0421\u0442\u0440\u043e\u043a\u0430 \u00ab\u0422\u0430\u0439\u043c\u0435\u0440\u044b \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u044b\u00bb \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u043e\u0439: setTimeout<\/code> \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0432\u0438\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0435. \u0412\u0442\u043e\u0440\u043e\u0439 \u0442\u0430\u0439\u043c\u0435\u0440 \u043e\u0442\u043c\u0435\u043d\u0435\u043d \u0434\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0411\u043e\u0440\u0438\u0441 \u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f.<\/p>\n
    \u0427\u0442\u043e \u0432\u0430\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043f\u0440\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b:<\/p>\n