اقدامات را در یک بازه زمانی مشخص جاوا اسکریپت تکرار کنید. نمونه هایی از تابع jQuery setTimeout()

متد setInterval() که در رابط‌های Window و Worker ارائه می‌شود، به طور مکرر یک تابع را فراخوانی می‌کند یا یک قطعه کد را با تاخیر زمانی ثابت بین هر تماس اجرا می‌کند.

به همان دلایلی که استفاده از eval() را به یک خطر امنیتی تبدیل می کند. تاخیر زمان، بر حسب میلی ثانیه (هزارم ثانیه)، تایمر باید بین اجرای تابع یا کد مشخص شده تاخیر داشته باشد. برای جزئیات در مورد محدوده مجاز مقادیر تاخیر به زیر مراجعه کنید. arg1, ..., argN اختیاری آرگومان های اضافی که از طریق تابع مشخص شده توسط

توجه: ارسال آرگومان های اضافی به setInterval() در دستور اول کار نمی کند

اینترنت اکسپلورر

9 و قبل از آن. اگر می خواهید این عملکرد را در آن مرورگر فعال کنید، باید از یک polyfill استفاده کنید (به بخش مراجعه کنید).

intervalID برگشتی یک مقدار عددی و غیر صفر است که تایمر ایجاد شده توسط فراخوانی setInterval() را مشخص می کند. این مقدار را می توان برای لغو مهلت ارسال کرد.

Var intervalID = window.setInterval(myCallback، 500، "Parameter 1"، "Parameter 2"); تابع myCallback(a, b) (// کد شما در اینجا // پارامترها کاملا اختیاری هستند. console.log(a); console.log(b)؛ )

مثال زیر تابع flashtext() را یک بار در ثانیه فراخوانی می کند تا زمانی که دکمه Stop فشار داده شود.

setInterval/clearInterval مثال var nIntervId;

تابع changeColor() (nIntervId = setInterval(flashText, 1000); ) تابع flashText() (var oElem = document.getElementById("my_box"); oElem.style.color = oElem.style.color == "قرمز"؟ " آبی" : "قرمز"؛ // oElem.style.color == "قرمز"؟ "آبی": "قرمز" یک عملگر سه تایی است. ) تابع stopTextColor() (clearInterval(nIntervId); )

مثال 3: شبیه سازی ماشین تحریر

مثال زیر ابتدا با پاک کردن و سپس تایپ آهسته محتوایی در NodeList که با گروه مشخصی از انتخابگرها مطابقت دارد، ماشین تحریر را شبیه سازی می کند.< nPos) { return true; } var oRel, bExit = false; if (aMap.length === nPos) { aMap.push(0); } while (aMap < oSheet.parts.length) { oRel = oSheet.parts]; scroll(oRel, nPos + 1, bEraseAndStop) ? aMap++ : bExit = true; if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) { bExit = true; oCurrent = oRel.ref; sPart = oCurrent.nodeValue; oCurrent.nodeValue = ""; } oSheet.ref.appendChild(oRel.ref); if (bExit) { return false; } } aMap.length--; return true; } function typewrite () { if (sPart.length === 0 && scroll(aSheets, 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; } oCurrent.nodeValue += sPart.charAt(0); sPart = sPart.slice(1); } function Sheet (oNode) { this.ref = oNode; if (!oNode.hasChildNodes()) { return; } this.parts = Array.prototype.slice.call(oNode.childNodes); for (var nChild = 0; nChild < this.parts.length; nChild++) { oNode.removeChild(this.parts); this.parts = new Sheet(this.parts); } } var nIntervId, oCurrent = null, bTyping = false, bStart = true, nIdx = 0, sPart = "", aSheets = , aMap = ; this.rate = nRate || 100; this.play = function () { if (bTyping) { return; } if (bStart) { var aItems = document.querySelectorAll(sSelector); if (aItems.length === 0) { return; } for (var nItem = 0; nItem < aItems.length; nItem++) { aSheets.push(new Sheet(aItems)); /* Uncomment the following line if you have previously hidden your elements via CSS: */ // aItems.style.visibility = "visible"; } bStart = false; } nIntervId = setInterval(typewrite, this.rate); bTyping = true; }; this.pause = function () { clearInterval(nIntervId); bTyping = false; }; this.terminate = function () { oCurrent.nodeValue += sPart; sPart = ""; for (nIdx; nIdx < aSheets.length; scroll(aSheets, 0, false)); clean(); }; } /* usage: */ var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15); /* default frame rate is 100: */ var oTWExample2 = new Typewriter("#controls"); /* you can also change the frame rate value modifying the "rate" property; for example: */ // oTWExample2.rate = 150; onload = function () { oTWExample1.play(); oTWExample2.play(); }; span.intLink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ }

ماشین تحریر جاوا اسکریپت - تابع نمونه تایپ MDN (sSelector, nRate) ( تابع پاک () (clearInterval(nIntervId)؛ bTyping = false؛ bStart = true؛ oCurrent = null؛ aSheets.length = nIdx = 0; ) تابع scrollno (PoShet) , bEraseAndStop) ( if (!oSheet.hasOwnProperty("parts") || aMap.length

CopyLeft 2012 توسط Mozilla Developer Network

Vivamus blandit massa ut metus mattis در fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. در tincidunt tincidunt tincidunt.

ماشین تحریر جاوا اسکریپت
Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem، sed facilisis ligula. نام cursus lobortis placerat. Sed dui nisi، elementum eu sodales ac، placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna، ultrices ultrices nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. عدد صحیح ornare، erat a porta tempus، velit justo fermentum elit، a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat، pulvinar laoreet magna. Maecenas vestibulum mollis nunc در posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.

Duis lobortis sapien quis nisl luctus porttitor. در تمپور سمپر لیبرو، eu tincidunt dolor eleifend sit amet. Ut nec velit در dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus، dignissim et fringilla et، egestas vel eros. Duis malesuada accumsan dui، در fringilla mauris bibStartum quis. کراس آدیپیسینگ ultricies fermentum. Praesent bibStartum condimentum feugiat.

Nam faucibus، ligula eu fringilla pulvinar، lectus telus iaculis nunc، vitae scelerisque metus leo non metus. لوبورتیس ماتیس لوبرتیس پروین. Quisque accumsan faucibus erat، vel varius tortor ultrices ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc، elementum a consectetur et، ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.

همانطور که قبلاً بحث شد، اینترنت اکسپلورر نسخه‌های 9 و پایین‌تر از ارسال آرگومان‌ها به تابع callback در setTimeout() و setInterval() پشتیبانی نمی‌کنند. کد اختصاصی اینترنت اکسپلورر زیر روشی را برای غلبه بر این محدودیت نشان می دهد. برای استفاده کافیست کد زیر را به بالای اسکریپت خود اضافه کنید.

امکان دیگر استفاده از یک تابع ناشناس برای فراخوانی تماس است، اگرچه این راه حل کمی گران تر است. مثال:

Var intervalID = setInterval(function() ( myFunc("one", "two", "three"); ), 1000);

برگه‌های غیرفعال به Gecko 5.0 نیاز دارد (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

مشکل "این"

توضیح

MyArray = ["صفر"، "یک"، "دو"]; myArray.myMethod = تابع (sProperty) ( alert(arguments.length > 0 ? this : this); ); myArray.myMethod(); // "صفر، یک، دو" myArray.myMethod(1) را چاپ می کند. // "one" setTimeout را چاپ می کند(myArray.myMethod, 1000); // "" را بعد از 1 ثانیه setTimeout چاپ می کند(myArray.myMethod, 1500, "1"); // پس از 1.5 ثانیه "undefined" را چاپ می کند // ارسال شی "this" با .call کار نمی کند // زیرا این مقدار این را در خود setTimeout تغییر می دهد // در حالی که ما می خواهیم مقدار این را در myArray تغییر دهیم. myMethod. setTimeout.call(myArray, myArray.myMethod, 2500, 2)؛

همانطور که می بینید هیچ راهی برای ارسال این شی به تابع callback در جاوا اسکریپت قدیمی وجود ندارد.

یک راه ممکن برای حل مشکل "this" جایگزینی دو تابع اصلی setTimeout() یا setInterval() با دو تابع است. غیر بومیمواردی که فراخوانی خود را از طریق متد Function.prototype.call فعال می کنند. مثال زیر جایگزینی احتمالی را نشان می دهد:

// عبور شی "this" را از طریق تایمرهای جاوا اسکریپت فعال کنید var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; window.setTimeout = تابع (vCallback، nDelay /*، argumentToPass1، argumentToPass2، و غیره. */) ( var oThis = this، aArgs = Array.prototype.slice.call(arguments, 2)؛ بازگشت __nativeST__(نمونه vCallback تابع Function ? () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay ); window.setInterval = تابع (vCallback، nDelay /*، argumentToPass1، argumentToPass2، و غیره. */) ( var oThis = this، aArgs = Array.prototype.slice.call(arguments, 2)؛ برگرداندن __nativeSI__(نمونه پاسخ به تماس تابع Function ? () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay );

این دو جایگزین همچنین عبور استاندارد HTML5 از آرگومان های دلخواه را به توابع برگشت به تماس تایمرها در اینترنت اکسپلورر فعال می کنند. بنابراین می توان از آنها به عنوان استفاده کرد غیر استانداردپلی فیل ها نیز برای a را ببینید مطابق با استانداردپلی پر

تست ویژگی جدید:

MyArray = ["صفر"، "یک"، "دو"]; myArray.myMethod = تابع (sProperty) ( alert(arguments.length > 0 ? this : this); ); setTimeout (هشدار، 1500، "سلام دنیا!")؛ // استفاده استاندارد از setTimeout و setInterval حفظ شده است، اما... setTimeout.call(myArray, myArray.myMethod, 2000); // "صفر، یک، دو" را بعد از 2 ثانیه چاپ می کند setTimeout.call(myArray, myArray.myMethod, 2500, 2); // "دو" را بعد از 2.5 ثانیه چاپ می کند

برای یک نسخه پیچیده تر اما همچنان ماژولار آن ( دیمون) JavaScript Daemons Management را ببینید. این نسخه پیچیده تر چیزی نیست جز مجموعه ای بزرگ و مقیاس پذیر از روش ها دیمونسازنده با این حال، دیمونسازنده خود چیزی جز شبیه سازی نیست Mini Daemonبا پشتیبانی اضافی برای initو شروعتوابع اعلام شده در طول نمونه سازی دیمون. بنابراین Mini Daemonفریم ورک همچنان راه پیشنهادی برای انیمیشن های ساده است، زیرا دیمونبدون مجموعه ای از روش ها، اساساً شبیه سازی از آن است.

MiniDaemon آرگومان هایی را به تابع callback ارسال می کند. اگر می خواهید با مرورگرهایی که به صورت بومی از این ویژگی پشتیبانی نمی کنند روی آن کار کنید، از یکی از روش های پیشنهادی در بالا استفاده کنید.

var myDaemon = MiniDaemon جدید( این شی, پاسخ به تماس[ , نرخ [, طول]]);

تابع setInterval() معمولاً برای تعیین تاخیر برای توابعی که بارها و بارها اجرا می شوند، مانند انیمیشن ها استفاده می شود. می توانید با استفاده از WindowOrWorkerGlobalScope.clearInterval() بازه را لغو کنید.

اگر می خواهید تابع شما فراخوانی شود یک بارپس از تاخیر مشخص شده، استفاده کنید.

این امکان وجود دارد که فواصل تو در تو باشند؛ به این معنا که فراخوانی برای setInterval() به نوبه خود می‌تواند setInterval() را فراخوانی کند تا بازه‌ای دیگر در حال اجرا باشد، حتی اگر اولین بازه همچنان ادامه دارد. برای کاهش تأثیر بالقوه این امر بر روی عملکرد، زمانی که فواصل بیش از پنج سطح تو در تو قرار گیرند، مرورگر به طور خودکار یک مقدار حداقل 4 میلی ثانیه را برای فاصله اعمال می کند.

مرورگرها ممکن است در برخی شرایط حداقل مقادیر دقیق تری را برای بازه زمانی اعمال کنند، اگرچه اینها نباید رایج باشند. همچنین توجه داشته باشید که مقدار واقعی زمانی که بین تماس‌ها به تماس‌های برگشتی می‌گذرد ممکن است بیشتر از تأخیر داده شده باشد. برای مثال به دلایل تاخیر بیشتر از آنچه در WindowOrWorkerGlobalScope.setTimeout() اشاره شده است مراجعه کنید.

اگر این احتمال وجود دارد که اجرای منطق شما بیشتر از زمان بازه زمانی طول بکشد، توصیه می شود که با استفاده از setTimeout() به صورت بازگشتی یک تابع نامگذاری شده را فراخوانی کنید. به عنوان مثال، اگر از setInterval() برای نظرسنجی از یک سرور راه دور هر 5 ثانیه استفاده کنید، تأخیر شبکه، سروری که پاسخگو نیست و بسیاری از مسائل دیگر می تواند از تکمیل درخواست در زمان تعیین شده جلوگیری کند. به این ترتیب، ممکن است با درخواست‌های XHR در صف مواجه شوید که لزوماً به ترتیب بر نمی‌گردند.

در برنامه نویسی به زبان های اسکریپتی، به صورت دوره ای نیاز به ایجاد مکث وجود دارد - اجرای برنامه برای مدتی متوقف شود و سپس به کار ادامه دهید. به عنوان مثال، در اسکریپت های VBS و PHP روش های زیر امکان پذیر است:

VBS: wscript.sleep 1500 (توقف 1.5 ثانیه)

PHP: sleep(10); (به مدت 10 ثانیه توقف کنید)

در طول چنین مکث هایی، سیستم زمان اجرا (PHP یا VBS) هیچ کاری نمی کند. توسعه دهنده ای که سعی می کند به طور مستقیم از چیزی مشابه در جاوا اسکریپت استفاده کند، به طرز ناخوشایندی شگفت زده خواهد شد. اشتباه رایجهنگام تلاش برای ایجاد مکث در جاوا اسکریپت، به نظر می رسد:

تابع badtest() ( برای (var i=1; i< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }

فکر می کنید وقتی در طول حلقه نوبت به کشیدن عدد بعدی می رسد، setTimeout شما صادقانه جاوا اسکریپت را متوقف می کند، 0.9 ثانیه صبر کنید، عدد مورد نظر را به انتهای فیلد ورودی اضافه کنید و سپس به کار خود ادامه دهید. اما در واقعیت این درست نیست: setInterval و setTimeout در جاوا اسکریپت فقط اجرای عمل (یا تابع) مشخص شده در پرانتز را به تاخیر می اندازند. در مثال ما، موارد زیر اتفاق خواهد افتاد:

به عنوان مثال، بلافاصله به معنای 1 میلی ثانیه است (یعنی به طور نامتناسبی در مقایسه با 900 میلی ثانیه): حلقه تقریباً فوراً کار خود را انجام می دهد و چندین کار معوق را از یک نقطه زمانی ایجاد می کند. این بدان معنی است که تمام کارهای معلق "نقاشی" تقریباً در یک زمان بدون مکث بین اضافه کردن اعداد جدید تکمیل می شوند. چرخه شروع می شود؛ همه چیز به مدت 0.9 ثانیه منجمد می شود. و shirr - همه اعداد پشت سر هم یکی پس از دیگری شلیک می شوند.

چگونه در چنین حالتی setTimeout را به درستی اعمال کنیم؟ این پیچیده است. باید تابع را فراخوانی کنید به صورت بازگشتی(از داخل تابع همان تابع)، و برای اینکه این فرآیند بی پایان نباشد، یک شرط توقف تنظیم کنید (مثلاً اندازه عددی که باید چاپ شود):

تابع welltest() (اگر (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }

و متغیر i باید خارج از تابع مقداردهی شود - برای مثال، مانند این:

اکنون همه چیز همانطور که باید کار می کند (زمان تاخیر را از 0.9 ثانیه به 0.4 ثانیه کاهش دادیم). اما برای چنین کارهایی، منطقی تر است که از setInterval به جای setTimeout استفاده شود (اگرچه این کار به دو تابع نیاز دارد):

تابع besttest() ( window.i = 0 window.timer1 = window.setInterval("draw()", 400) ) تابع draw() ( document.getElementById("test3").value += ++i if (i >= 9) clearInterval(window.timer1))

ویژگی متد Javascirpt setInterval این است که "به خودی خود" عبور نمی کند، باید با یک روش خاص clearInterval متوقف شود. و برای اینکه مشخص شود دقیقاً چه چیزی باید متوقف شود، وظیفه عمل معوق یک شناسه ویژه اختصاص داده می شود - یک تایمر: window.timer1 = window.setInterval(...) .

شناسه ها همچنین می توانند به وظایف ایجاد شده توسط روش setTimeout اختصاص داده شوند. همه شناسه های تایمر باید از یکدیگر متمایز باشند (در پنجره مرورگر فعلی منحصر به فرد). سپس می توانید چندین کار مختلف در پنجره ایجاد کنید که از اکشن های معوق استفاده می کنند و این وظایف به صورت موازی اجرا می شوند (به طور همزمان، اگر رایانه منابع کافی داشته باشد)، که اساساً در PHP یا VBS غیرممکن است.

در اینجا نمونه‌ای از صفحه‌ای است که چندین تایمر جاوا اسکریپت به طور همزمان اجرا می‌شوند: setinterval.htm (توابع جاوا اسکریپت در فایل setinterval.js). تمام تایمرهای صفحه (به جز منو) را می توان با استفاده از کلید Esc متوقف کرد. همه تایمرهای مثال بر اساس شمارش معکوس "طبیعی" (و نه i++ انتزاعی) - زمان یا مسافت است. همه «ساعت‌ها» به‌طور ویژه غیرهمگام‌سازی شده‌اند (برای وضوح). تایمرهای وابسته به فاصله در "نشانگر" و در منوی کشویی ("کشش به بیرون") استفاده می شود.

منوی کشویی ما در واقع کشویی است (از زیر "سرصفحه"): شکاف هایی به طور ویژه بین عناصر باقی می ماند تا بتوانید ببینید که چگونه به بیرون می لغزد. به طور غیر منتظره، معلوم شد که ما نمی توانیم خروجی را برای لیست هایی با طول های مختلف به همان اندازه صاف کنیم - احتمالاً به دلیل عملکرد پایین رایانه (AMD Athlon 999 MHz).

کاملاً بدیهی است که برای زیبایی و هماهنگی لازم است که لیست آیتم های مختلف منو به طور همزمان ظاهر شود. به این معنی که لیست های طولانی تر باید با تعداد بیشتری حذف شوند سرعت بالا، کوتاهترها - با سرعت کمتر. به نظر می رسد که این می تواند به این صورت اجرا شود:

با این منطق، اگر لیست کشویی 200 پیکسل بالا باشد، باید هر 1 میلی ثانیه آن را یک پیکسل پایین بیاوریم. اما چنین سرعتی در رایانه ما کار نمی کند - مرورگر به سادگی وقت ندارد موقعیت جدید لیست را در یک میلی ثانیه ترسیم کند. بله. جاوا اسکریپت می تواند شمارش کند (چه چیزی برای شمارش وجود دارد؟)، اما مرورگر (فایرفاکس) زمانی برای نمایش ندارد. وضعیت معمولی برای وب.

بنابراین، می توان کم و بیش زمان حرکت منو را تنها با عصا یکسان کرد و هنوز مشخص نیست که چگونه این کار برای بیشتر انجام می شود. کامپیوتر سریع. اما ما باید روی کندترین آنها حساب کنیم، درست است؟ الگوریتم (بدون در نظر گرفتن سرعت کامپیوتر) چیزی شبیه به این می شود:

اکنون لیست ها کم و بیش در حال بیرون آمدن هستند. برای زمان کم و بیش مشابه. در صفحه setinterval.htm.

و در اینجا بروس می آید:

تابع slide_do(obj، maxtop، offset) ( if (getTopLeft(obj).top< maxtop) { obj.style.top = getTopLeft(obj).top + offset } else { if (obj && obj.timer1) { clearInterval(obj.timer1) obj.timer1 = null } } }

خود این تابع که لیست های تودرتو را از منو خارج می کند، همانطور که می بینیم بسیار ساده است. تنها چیزی که باقی می ماند این است که آن را با چیزی شبیه به این خط اجرا کنید:

Ts.timer1 = setInterval(function())(slide_do(ts، maxtop، offset))، تاخیر)

خوب، قبل از شروع، فقط تمام این maxtop و offset را محاسبه کنید و همچنین لیست را در موقعیت mintop قرار دهید. این همان کاری است که تابع اسلاید () مقدماتی 40 خط انجام می دهد. و همه با هم - در فایل setinterval.js. بله، و این مزخرف به هیچ وجه بدون فایل سبک های موجود کار نخواهد کرد

درک نحوه عملکرد تایمرهای جاوا اسکریپت بسیار مهم است. اغلب رفتار آنها با درک شهودی ما از multithreading مطابقت ندارد و این به دلیل این واقعیت است که آنها در یک رشته واحد اجرا می شوند. بیایید به چهار عملکرد که با آنها می توانیم تایمرها را مدیریت کنیم نگاه کنیم:

• var id = setTimeout (fn، تاخیر)؛ - یک تایمر ساده ایجاد می کند که یک تابع داده شده را پس از یک تاخیر معین فراخوانی می کند. این تابع یک شناسه منحصربفرد را برمی‌گرداند که با آن می‌توان تایمر را متوقف کرد.
• var id = setInterval(fn, delay); - مشابه setTimeout، اما به طور مداوم تابع را در یک بازه زمانی مشخص (تا زمانی که متوقف شود) فراخوانی می کند.
• clearInterval(id);, clearTimeout(id); - شناسه تایمر را می پذیرد (با یکی از توابع شرح داده شده در بالا برگردانده می شود) و اجرای callback"a را متوقف می کند.

اطلاعات بسیار زیادی در این شکل وجود دارد، اما درک آن به شما درک عمیق‌تری از نحوه عملکرد ناهمزمانی جاوا اسکریپت می‌دهد. این نمودار زمان را به صورت عمودی بر حسب میلی ثانیه نشان می دهد، بلوک های آبی بلوک هایی از کد جاوا اسکریپت را نشان می دهد که اجرا شده اند. به عنوان مثال، بلوک اول به طور متوسط ​​در 18 میلی‌ثانیه اجرا می‌شود، یک کلیک ماوس اجرای حدود 11 میلی‌ثانیه را مسدود می‌کند و غیره.

جاوا اسکریپت فقط می تواند یک تکه کد را اجرا کند (به دلیل ماهیت تک رشته ای اجرا)، که هر کدام از آنها اجرای سایر رویدادهای ناهمزمان را مسدود می کند. این بدان معنی است که وقتی یک رویداد ناهمزمان رخ می دهد (مانند کلیک ماوس، تماس تایمر یا تکمیل درخواست XMLHttp)، به یک صف اضافه می شود و بعداً اجرا می شود (البته پیاده سازی بسته به مرورگر متفاوت است، اما اجازه دهید موافقت کنیم آن را "صف" نامید).

برای شروع، بیایید تصور کنیم که دو تایمر در یک بلوک جاوا اسکریپت شروع می شود: setTimeout با تاخیر 10 میلی ثانیه و setInterval با همان تاخیر. بسته به زمانی که تایمر شروع به کار کند، در لحظه ای که هنوز اولین بلوک کد را تکمیل نکرده ایم، فعال می شود. البته توجه داشته باشید که فورا شلیک نمی شود (این کار به دلیل تک رشته شدن امکان پذیر نیست). در عوض، تابع معوق در صف قرار می گیرد و در لحظه موجود بعدی اجرا می شود.

همچنین در حین اجرای اولین بلوک جاوا اسکریپت، یک کلیک ماوس رخ می دهد. کنترل کننده این رویداد ناهمزمان (و ناهمزمان است زیرا نمی توانیم آن را پیش بینی کنیم) در این لحظه نمی تواند مستقیماً اجرا شود، بنابراین مانند تایمر در یک صف قرار می گیرد.

پس از اجرای اولین بلوک کد جاوا اسکریپت، مرورگر این سوال را می پرسد: "چه چیزی در انتظار اجراست؟" در در این موردکنترل کننده کلیک ماوس و تایمر در حالت معلق هستند. مرورگر یکی از آنها را انتخاب می کند (کنترل کننده کلیک) و آن را اجرا می کند. تایمر منتظر تکه زمان بعدی موجود در صف اجرا خواهد ماند.

توجه داشته باشید که در حالی که کنترل کننده کلیک ماوس در حال اجرا است، اولین بازه تماس مجدد فعال می شود. درست مانند تماس با زمان سنج، در صف قرار می گیرد. با این حال، توجه داشته باشید که هنگامی که بازه دوباره فعال می شود (در حالی که تایمر-تماس در حال اجرا است)، از صف حذف خواهد شد. اگر تمام تماس‌های بازه‌ای زمانی در صف قرار می‌گرفتند که بخش بزرگی از کد اجرا می‌شد، این امر باعث می‌شد که تعداد زیادی از توابع در انتظار فراخوانی باشند، در عوض، مرورگرها تمایل دارند تا زمانی که هیچ توابعی دیگری وجود نداشته باشد، منتظر بمانند قبل از اضافه کردن یکی دیگر به صف، در صف باقی مانده است.

بنابراین، ما می توانیم موردی را مشاهده کنیم که شلیک سوم بازخوانی بازه زمانی با لحظه ای که قبلاً اجرا شده است، همزمان باشد. این یک نکته مهم را نشان می‌دهد: فاصله‌ها اهمیتی ندارند که در حال حاضر چه چیزی در حال اجرا است، آنها بدون در نظر گرفتن دوره تاخیر بین اجراها به صف اضافه می‌شوند.

در نهایت، پس از اتمام دومین بازه تماس، خواهیم دید که چیزی برای اجرای موتور جاوا اسکریپت باقی نمانده است. این بدان معنی است که مرورگر دوباره منتظر رخدادهای ناهمزمان جدید است. این در علامت 50 میلی‌ثانیه اتفاق می‌افتد، جایی که بازخوانی مجدد دوباره کار می‌کند. در این مرحله چیزی برای مسدود کردن آن وجود نخواهد داشت، بنابراین بلافاصله کار می کند.

بیایید به مثالی نگاه کنیم که به خوبی تفاوت بین setTimeout و setInterval را نشان می دهد.
setTimeout(function())( /* چند بلوک طولانی از کد... */ setTimeout(arguments.callee, 10); ), 10);
setInterval(function())( /* برخی از بلوک های طولانی کد... */ ), 10);

این دو گزینه در نگاه اول معادل هستند، اما در واقعیت اینطور نیستند. کد با استفاده از setTimeout همیشه حداقل 10 میلی‌ثانیه پس از تماس قبلی تاخیر خواهد داشت (می‌تواند بیشتر باشد، اما هرگز کمتر)، در حالی که کد با استفاده از setInterval هر 10 میلی‌ثانیه فراخوانی می‌شود، صرف نظر از اینکه تماس قبلی چه زمانی انجام شده است.
بیایید همه چیزهایی که در بالا گفته شد را خلاصه کنیم:
- توابع setTimeout و setInterval بطور اساسی در کدهای ناهمزمان متفاوت اجرا می شوند.
- اگر تایمر را نمی توان در اجرا کرد در حال حاضر، تا نقطه اجرای بعدی (که بیشتر از تاخیر مورد نظر خواهد بود) به تعویق می افتد.
- فواصل (setInterval) را می توان یکی پس از دیگری بدون تاخیر اجرا کرد اگر اجرای آنها بیشتر از تاخیر مشخص شده باشد.

همه اینها فوق العاده است اطلاعات مهمبرای توسعه دانستن اینکه موتور جاوا اسکریپت چگونه کار می کند، به خصوص با بسیاری از رویدادهای ناهمزمان (که اغلب اتفاق می افتد)، پایه بسیار خوبی برای ساخت برنامه های کاربردی پیشرفته ایجاد می کند.

منبع: http://learn.javascript.ru/settimeout-setinterval

تقریباً تمام پیاده‌سازی‌های جاوا اسکریپت دارای یک زمان‌بندی زمان‌سنج داخلی هستند که به شما امکان می‌دهد تا یک تابع را برای فراخوانی پس از یک دوره زمانی مشخص زمان‌بندی کنید.

به طور خاص، این ویژگی در مرورگرها و در سرور Node.JS پشتیبانی می شود.

نحو:

پارامترها:

• تابع/کد
  • یک تابع یا خط کدی که باید اجرا شود.
  • رشته برای اهداف سازگاری نگهداری می شود و توصیه نمی شود.
• تابع
  • تاخیر در میلی ثانیه، 1000 میلی ثانیه برابر با 1 ثانیه است.
• arg1، arg2…
  • آرگومان هایی برای انتقال به تابع. در IE9- پشتیبانی نمی شود.
  • تابع پس از زمان مشخص شده در پارامتر تاخیر اجرا می شود.

به عنوان مثال، کد زیر پس از یک ثانیه هشدار ("Hello") را فعال می کند:

اگر آرگومان اول یک رشته باشد، مفسر یک تابع ناشناس از آن رشته ایجاد می کند.

یعنی این ورودی دقیقاً به همین صورت عمل می کند:

SetTimeout("هشدار("سلام")" , 1000);

به جای آن از توابع ناشناس استفاده کنید:

SetTimeout(function () ( هشدار ("سلام" ) ), 1000 );

در همه مرورگرهای مدرنبا توجه به IE10، setTimeout به شما امکان می دهد پارامترهای تابع را مشخص کنید.

مثال زیر خروجی "Hello, I'm Vasya" را در همه جا به جز IE9- می دهد:

... با این حال، در بیشتر موارد ما به پشتیبانی از IE قدیمی نیاز داریم و به شما اجازه نمی دهد که آرگومان ها را مشخص کنید. بنابراین، برای انتقال آنها، آنها تماس را در یک تابع ناشناس قرار می دهند:

فراخوانی setTimeout از این متن عبور نمی کند.

به طور خاص، فراخوانی یک متد شی از طریق setTimeout در زمینه جهانی کار خواهد کرد. این ممکن است منجر به نتایج نادرست شود.

به عنوان مثال، اجازه دهید پس از یک ثانیه ()user.sayHi را فراخوانی کنیم:

از آنجایی که setTimeout تابع user.sayHi را در زمینه جهانی اجرا می کند، از طریق این به شی دسترسی نخواهد داشت.

به عبارت دیگر، این دو فراخوانی به setTimeout یک کار را انجام می دهند:

خوشبختانه این مشکل نیز با ایجاد یک تابع میانی به راحتی حل می شود:

یک تابع wrapper برای ارسال آرگومان ها از مرورگر متقابل و حفظ متن اجرا استفاده می شود.

تابع setTimeout یک timerId را برمی‌گرداند که می‌توان از آن برای لغو عمل استفاده کرد.

نحو:

ClearTimeout (TimerId)

در مثال زیر، یک بازه زمانی تعیین کردیم و سپس حذف کردیم (نظرمان را تغییر دادیم). در نتیجه هیچ اتفاقی نمی افتد.

متد setInterval دارای نحوی شبیه setTimeout است.

معنای ادله نیز همین است. اما برخلاف setTimeout، این تابع را یک بار اجرا نمی کند، بلکه آن را به طور منظم در یک بازه زمانی مشخص تکرار می کند. می توانید با تماس گرفتن، اجرا را متوقف کنید:

ClearInterval(timerId)

مثال زیر، هنگام اجرا، هر دو ثانیه یک پیام نمایش می دهد تا زمانی که دکمه Stop را کلیک کنید:

var timer = setInterval(function () ( alert(i++) ), 2000);

صف و همپوشانی تماس ها در setInterval

فراخوانی setInterval (تابع، تاخیر) باعث می شود که تابع در بازه زمانی مشخص اجرا شود. اما در اینجا یک ظرافت وجود دارد.

در واقع مکث بین تماس ها کمتر از فاصله زمانی مشخص شده است.

به این معنی که مرورگر بدون در نظر گرفتن زمان اجرای خود عملکرد، عملکرد را به طور منظم هر 100 میلی ثانیه راه اندازی می کند.

این اتفاق می افتد که اجرای یک تابع بیشتر از تاخیر طول می کشد. به عنوان مثال، تابع پیچیده است، اما تاخیر کم است. یا تابع حاوی عبارات هشدار / تایید / اعلان است که رشته اجرا را مسدود می کند. اینجاست که چیزها شروع به جالب شدن می کنند.

اگر عملکردی به دلیل اشغال بودن مرورگر راه اندازی نشود، به محض آزاد شدن مرورگر در صف قرار می گیرد و اجرا می شود.

تصویر زیر نشان می دهد که برای عملکردی که اجرای آن زمان زیادی می برد چه اتفاقی می افتد.

فراخوانی تابع آغاز شده توسط setInterval به صف اضافه می شود و در صورت امکان بلافاصله رخ می دهد:

راه اندازی دوم تابع بلافاصله پس از پایان اولین رخ می دهد:

اعدام بیش از یک بار در صف قرار نمی گیرد.

اگر اجرای یک تابع بیشتر از چندین اجرای برنامه ریزی شده طول بکشد، باز هم یک بار در صف قرار می گیرد. بنابراین هیچ "انباشتگی" پرتاب وجود ندارد.

در تصویر زیر setInterval سعی می کند تابع را در 200 میلی ثانیه اجرا کند و تماس را در صف قرار دهد. در 300 و 400 میلی ثانیه تایمر دوباره بیدار می شود، اما هیچ اتفاقی نمی افتد.

فراخوانی setInterval (تابع، تاخیر) تأخیر واقعی بین اجراها را تضمین نمی کند.

مواردی وجود دارد که تاخیر واقعی بیشتر یا کمتر از میزان تعیین شده باشد. به طور کلی، این یک واقعیت نیست که حداقل یک تاخیر وجود داشته باشد.

در مواردی که نه تنها به تکرار منظم نیاز است، بلکه به تأخیر بین اجراها نیاز است، setTimeout برای تنظیم مجدد هر بار که عملکرد اجرا می شود استفاده می شود.

در زیر مثالی وجود دارد که یک هشدار با فاصله زمانی 2 ثانیه بین آنها صادر می کند.

var timer = setTimeout(function run () ( هشدار(i++)؛ timer = setTimeout(run, 2000); ), 2000);

حداقل تاخیر تایمر

تایمر مرورگر کمترین تأخیر ممکن را دارد. در مرورگرهای مدرن تقریباً از صفر تا 4 میلی‌ثانیه متغیر است. در افراد مسن تر می تواند طولانی تر باشد و به 15 میلی ثانیه برسد.

طبق استاندارد حداقل تاخیر 4 میلی ثانیه است. بنابراین هیچ تفاوتی بین setTimeout(..,1) و setTimeout(..,4) وجود ندارد.

تحریک ممکن است بسیار کمتر باشد در برخی موارد، تاخیر ممکن است 4 میلی ثانیه نباشد، بلکه 30 میلی ثانیه یا حتی 1000 میلی ثانیه باشد.

اکثر مرورگرها (عمدتاً رومیزی) به اجرای setTimeout / setInterval ادامه می دهند حتی اگر برگه غیرفعال باشد. در عین حال تعدادی از آنها (Chrome, FF, IE10) حداقل فرکانس تایمر را به 1 بار در ثانیه کاهش می دهند. به نظر می رسد که تایمر در برگه "پس زمینه" کار می کند، اما به ندرت.

وقتی با باتری کار می‌کنید، در لپ‌تاپ، مرورگرها می‌توانند فرکانس را کاهش دهند تا کد را کمتر اجرا کنند و در مصرف باتری صرفه‌جویی کنند. اینترنت اکسپلورر به ویژه برای این امر معروف است. بسته به تنظیمات، کاهش می تواند چندین برابر شود. اگر بار CPU خیلی زیاد باشد، جاوا اسکریپت ممکن است نتواند تایمرها را به موقع پردازش کند. با این کار برخی از اجراهای setInterval رد می شود.

نتیجه گیری: فرکانس 4 میلی ثانیه ارزش تمرکز روی آن را دارد، اما نباید روی آن حساب کنید.

خروجی فواصل به کنسول کدی که فواصل زمانی بین تماس‌ها را می‌شمرد، چیزی شبیه به این است:

این ترفند ارزش ورود به تاریخچه هک های جاوا اسکریپت را دارد.

اگر بخواهید آن را پس از پایان اسکریپت فعلی اجرا کنید، تابع در setTimeout (func، 0) پیچیده می شود.

مسئله این است که setTimeout هرگز این تابع را فوراً اجرا نمی کند. او فقط اجرای آن را برنامه ریزی می کند. اما مفسر جاوا اسکریپت تنها پس از اجرای اسکریپت فعلی شروع به انجام توابع برنامه ریزی شده می کند.

طبق استاندارد، setTimeout به هر حال نمی تواند یک تابع را با تاخیر 0 اجرا کند، همانطور که قبلاً گفتیم، تاخیر معمولاً 4 میلی ثانیه خواهد بود. اما نکته اصلی در اینجا این است که در هر صورت اجرا پس از اجرای کد فعلی انجام می شود.

به عنوان مثال:

متدهای setInterval (func، delay) و setTimeout (func، delay) به شما این امکان را می‌دهند که func را به طور منظم/یک بار در هر میلی‌ثانیه تاخیر اجرا کنید.

هر دو روش شناسه تایمر را برمی گرداند. برای توقف اجرا با فراخوانی clearInterval/clearTimeout استفاده می شود.

| | setInterval | setTimeout | || ----------- | ---------- | | زمان بندی | تماس کاملاً روی یک تایمر است. اگر مترجم مشغول باشد، یک تماس در صف قرار می گیرد. زمان اجرای تابع در نظر گرفته نمی شود، بنابراین فاصله زمانی از پایان یک اجرا تا شروع اجرای دیگر ممکن است متفاوت باشد. | یک فراخوان بازگشتی به setTimeout به جای setInterval استفاده می شود که در آن یک مکث ثابت بین اجراها مورد نیاز است. | | تاخیر | حداقل تاخیر: 4 میلی ثانیه | حداقل تاخیر: 4 میلی ثانیه | | ویژگی های مرورگر | تأخیر 0 در اینترنت اکسپلورر کار نمی کند | در Opera، تأخیر صفر معادل 4 میلی‌ثانیه است و سایر تأخیرها از جمله 1 میلی‌ثانیه، 2 میلی‌ثانیه و 3 میلی‌ثانیه غیراستاندارد به‌دقت مدیریت می‌شوند. |