Заасан javascript хугацааны интервалаар үйлдлүүдийг давт. jQuery функцийн жишээ setTimeout()

Цонх болон Ажилчны интерфейс дээр санал болгож буй setInterval() арга нь дуудлага бүрийн хооронд тодорхой хугацааны сааталтайгаар функцийг дахин дахин дууддаг эсвэл кодын хэсгийг гүйцэтгэдэг.

eval()-г ашиглах нь аюулгүй байдлын эрсдэлтэй ижил шалтгаанаар. саатал Цаг хэмжигч нь заасан функц эсвэл кодыг гүйцэтгэх хооронд миллисекундээр (мянган секундын нэгээр) удаашрах ёстой. Сааталтын утгын зөвшөөрөгдсөн хязгаарын талаарх дэлгэрэнгүй мэдээллийг доороос үзнэ үү. arg1, ..., argN Нэмэлт нэмэлт аргументууд нь заасан функцээр дамждаг

Анхаар: Эхний синтакс дахь setInterval() руу нэмэлт аргумент дамжуулах нь ажиллахгүй

Internet Explorer

9 ба түүнээс өмнөх. Хэрэв та энэ хөтөч дээр энэ функцийг идэвхжүүлэхийг хүсвэл polyfill ашиглах ёстой (хэсгийг үзнэ үү).

Буцаагдсан интервалID нь setInterval() руу залгаснаар үүсгэсэн таймерыг тодорхойлдог тоон, тэгээс өөр утга юм; Энэ утгыг дамжуулж завсарлагыг цуцлах боломжтой.

Var intervalID = window.setInterval(myCallback, 500, "Параметр 1", "Параметр 2"); функц myCallback(a, b) ( // Энд таны код // Параметрүүд нь зөвхөн сонголттой. console.log(a); console.log(b); )

Дараах жишээ нь Stop товчийг дарах хүртэл секундэд нэг удаа flashtext() функцийг дууддаг.

setInterval/clearInterval жишээ var nIntervId;

функцийг өөрчлөхColor() ( nIntervId = setInterval(flashText, 1000); ) функц flashText() ( var oElem = document.getElementById("my_box"); oElem.style.color = oElem.style.color == "улаан" ? " blue" : "red"; // oElem.style.color == "red" ? "blue" : "red" нь гуравдагч оператор юм. ) функц 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; */ }

JavaScript бичгийн машин - MDN Жишээ функц Бичгийн машин (sSelector, nRate) ( функцийг цэвэрлэх () ( clearInterval(nIntervId); bTyping = худал; bStart = үнэн; oCurrent = null; aSheets.length = nIdx = 0; ) функц гүйлгэх (oSheet, nPos , bEraseAndStop) (хэрэв (!oSheet.hasOwnProperty("хэсгүүд") || aMap.length

CopyLeft 2012 Mozilla Developer Network

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

JavaScript бичгийн машин
Ямар ч тохиолдолд ямар ч асуудал байхгүй. Phasellus ac nisl lorem, sed facilisis ligula. Nam 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, ultricies ultricies nunc fringilla eget. Praesent sclerisque urna vitae nibh tristique varius consequat neque luctus. Бүхэл тоон чимэглэл, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Өвөрмөц намтар, мөнгөн тэмдэгт. Maecenas vestibulum mollis nunc in 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 in 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. Энэ нь цаг хугацааны үр дагаварт хүргэж болзошгүй юм. Aquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.

Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin matis lobortis lobortis. Quisque accumsan faucibus erat, эсвэл янз бүрийн тортор ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Нуллам тортор nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.

Өмнө дурьдсанчлан, Internet Explorer-ийн 9 ба түүнээс доош хувилбарууд нь setTimeout() эсвэл setInterval()-д аргументуудыг буцаан дуудах функц руу дамжуулахыг дэмждэггүй. Дараах IE-ийн тусгай код нь энэ хязгаарлалтыг даван туулах аргыг харуулж байна. Ашиглахын тулд скриптийнхээ дээд талд дараах кодыг нэмнэ үү.

Өөр нэг боломж бол энэ шийдэл нь арай илүү үнэтэй хэдий ч буцааж залгахдаа нэргүй функцийг ашиглах явдал юм. Жишээ:

Var intervalID = setInterval(function() ( myFunc("нэг", "хоёр", "гурван"); ), 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); // "нэг" setTimeout (myArray.myMethod, 1000) хэвлэнэ; // 1 секундын дараа "" хэвлэнэ setTimeout(myArray.myMethod, 1500, "1"); // 1.5 секундын дараа "тодорхойгүй" гэж хэвлэнэ // "энэ" объектыг .call-аар дамжуулвал ажиллахгүй // учир нь энэ нь setTimeout доторх энэ утгыг өөрөө өөрчилнө // бид myArray доторх үүний утгыг өөрчлөхийг хүсэж байна. .myMethod // үнэн хэрэгтээ энэ нь алдаа байх болно, учир нь setTimeout код нь үүнийг цонхны объект гэж тооцдог: setTimeout.call(myArray, myArray.myMethod, 2000: // алдаа: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: WrappedNettype дээр хууль бус ажиллагаа"); setTimeout.call(myArray, myArray.myMethod, 2500, // ижил алдаа

Таны харж байгаагаар энэ объектыг хуучин JavaScript-н буцаан дуудлагын функцэд шилжүүлэх арга байхгүй.

"Энэ" асуудлыг шийдэх боломжит арга бол хоёр үндсэн setTimeout() эсвэл setInterval() глобал функцийг хоёроор солих явдал юм. уугуул бус Function.prototype.call аргаар дамжуулан дуудлагыг идэвхжүүлдэг. Дараах жишээ нь солих боломжтойг харуулж байна.

// JavaScript таймераар "энэ" объектыг нэвтрүүлэхийг идэвхжүүлэх 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 instance of Function? () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay ); window.setInterval = функц (vCallback, nDelay /*, argumentToPass1, argumentToPass2 гэх мэт. */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); буцаах __nativeSI__(vCallback instance of Function? () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay );

Эдгээр хоёр орлуулалт нь IE дэх таймеруудын буцаан дуудлагын функцэд дурын аргументуудын 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 дэмон менежментийг үзнэ үү. Энэхүү илүү төвөгтэй хувилбар нь том бөгөөд өргөтгөх боломжтой аргуудын цуглуулгаас өөр юу ч биш юм Демонбүтээгч. Гэсэн хэдий ч, Демонбайгуулагч нь өөрөө клоноос өөр зүйл биш юм MiniDaemonнэмэлт дэмжлэгтэйгээр эхлэлболон эхлэх-ийг үүсгэх явцад зарласан функцууд демон. Тиймээс MiniDaemon Framework нь энгийн хөдөлгөөнт дүрслэлд санал болгож буй арга хэвээр байна, учир нь Демонаргын цуглуулгагүй бол үндсэндээ түүний клон юм.

MiniDaemon нь аргументуудыг буцаан дуудах функц руу дамжуулдаг. Хэрэв та энэ функцийг дэмждэггүй хөтөч дээр ажиллахыг хүсвэл дээр дурдсан аргуудын аль нэгийг ашиглана уу.

var myDaemon = шинэ MiniDaemon( thisObject, буцааж залгах[ , ханш [, урт]]);

setInterval() функцийг ихэвчлэн хөдөлгөөнт дүрс гэх мэт дахин дахин гүйцэтгэсэн функцүүдийн саатлыг тогтооход ашигладаг. Та WindowOrWorkerGlobalScope.clearInterval() ашиглан интервалыг цуцалж болно.

Хэрэв та функцээ дуудахыг хүсвэл нэг удаазаасан саатлын дараа .

Интервалуудыг үүрлэх боломжтой; өөрөөр хэлбэл, setInterval()-ын буцаан залгалт нь эхнийх нь үргэлжилж байгаа ч гэсэн өөр интервалыг ажиллуулахын тулд setInterval()-г дуудаж болно. Үүний болзошгүй нөлөөллийг багасгахын тулд гүйцэтгэлийн хувьд, интервалууд нь таван түвшнээс дээш гүнд орсны дараа хөтөч нь интервалын хамгийн бага 4 ms утгыг автоматаар хэрэгжүүлэх болно setInterval()-д 4 мс-ээс бага утгыг зааж өгөх оролдлого 4 мс хүртэл бэхлэгдэх болно.

Хөтөчүүд зарим тохиолдолд интервалын хувьд илүү хатуу хамгийн бага утгуудыг мөрддөг байж болох ч эдгээр нь нийтлэг байх ёсгүй. Буцах дуудлагын хоорондох бодит хугацаа нь өгөгдсөн сааталаас илүү байж болохыг анхаарна уу; Жишээ нь WindowOrWorkerGlobalScope.setTimeout()-д заасан хугацаанаас удаан саатсан шалтгааныг үзнэ үү.

Хэрэв таны логик ажиллахад интервалын хугацаанаас илүү урт хугацаа шаардагдах магадлалтай бол setTimeout() ашиглан нэрлэсэн функцийг рекурсив байдлаар дуудахыг зөвлөж байна. Жишээлбэл, setInterval()-г ашиглан алсын серверээс 5 секунд тутамд санал асуулга явуулах юм бол сүлжээний хоцролт, сервер хариу өгөхгүй байгаа болон бусад олон асуудлууд хүсэлтийг заасан хугацаанд дуусгахад саад болж болзошгүй. Тиймээс та дараалалд орсон XHR хүсэлтүүдтэй тулгарч магадгүй бөгөөд энэ нь дарааллаар нь эргэж ирэх шаардлагагүй юм.

Скрипт хэл дээр програмчлалын хувьд үе үе түр зогсоох шаардлагатай байдаг - програмын гүйцэтгэлийг хэсэг хугацаанд түр зогсоож, дараа нь үргэлжлүүлэн ажиллах. Жишээлбэл, VBS болон PHP скриптүүдэд дараах аргуудыг ашиглах боломжтой.

VBS: wscript.sleep 1500 (1.5 секунд зогсох)

PHP: унтах(10); (10 секунд зогсоо)

Ийм түр зогсолтын үед ажиллах цагийн систем (PHP эсвэл VBS) юу ч хийдэггүй. Javascript дээр үүнтэй төстэй зүйлийг зөн совингоор ашиглахыг оролдож буй хөгжүүлэгч тааламжгүй гайхшрал төрүүлэх болно. Нийтлэг алдаа Javascript дээр завсарлага үүсгэхийг оролдох үед дараах байдалтай харагдана.

badtest() функц ( for (var i=1; i).< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }

Та давталтын явцад дараагийн дугаарыг зурах ээлж ирэхэд таны setTimeout нь Javascript-г үнэнчээр ажиллахыг зогсоож, 0.9 секунд хүлээж, оролтын талбарын төгсгөлд хүссэн тоог нэмээд дараа нь үргэлжлүүлэн ажиллах болно гэж та бодож байна. Гэвч бодит байдал дээр энэ нь үнэн биш юм: Javascript дахь setInterval болон setTimeout нь зөвхөн хаалтанд заасан үйлдлийн (эсвэл функц) гүйцэтгэлийг хойшлуулдаг. Бидний жишээн дээр дараахь зүйл тохиолдох болно.

Нэн даруй гэдэг нь жишээлбэл, 1 мс (өөрөөр хэлбэл 900 мс-тэй харьцуулахад харьцангуй бага) гэсэн үг юм: гогцоо нь ажлаа бараг тэр даруй хийж, нэг цаг хугацаанд хойшлогдсон хэд хэдэн ажлыг бий болгоно. Энэ нь хүлээгдэж буй бүх "зурах" ажлуудыг бараг нэгэн зэрэг, шинэ дугаар нэмэх хооронд завсарлагагүйгээр дуусгах болно гэсэн үг юм. Цикл эхэлдэг; бүх зүйл 0.9 секундын турш хөлддөг; ба ширр - бүх тоонууд ар араасаа дараалан бууддаг.

Ийм тохиолдолд setTimeout-ийг хэрхэн зөв хэрэглэх вэ? Энэ нь төвөгтэй юм. Та функцийг дуудах хэрэгтэй болно рекурсив байдлаар(функц дотроос ижил функц), мөн энэ үйл явц төгсгөлгүй байхын тулд зогсоох нөхцөлийг (жишээлбэл, хэвлэх тооны хэмжээ) тохируулна уу.

Welltest() функц (хэрэв (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }

Мөн i хувьсагчийг функцээс гадуур эхлүүлэх шаардлагатай болно - жишээлбэл, иймэрхүү:

Одоо бүх зүйл зохих ёсоор ажиллаж байна (бид саатлын хугацааг 0.9 секундээс 0.4 секунд болгон бууруулсан). Гэхдээ ийм ажлуудын хувьд setTimeout-аас илүү setInterval-ийг ашиглах нь илүү логик юм (хэдийгээр үүнд хоёр функц шаардлагатай болно):

besttest() функц ( window.i = 0 window.timer1 = window.setInterval("draw()", 400) ) функц draw() ( document.getElementById("test3").утга += ++i хэрэв (i) >= 9) clearInterval(window.timer1) )

Javascirpt setInterval аргын онцлог нь "өөрөө" өнгөрөхгүй, тусгай clearInterval аргаар зогсоох ёстой; Мөн яг юу зогсоохыг тодорхой болгохын тулд хойшлуулсан үйлдлийн даалгаварт тусгай танигч - таймер оноодог: window.timer1 = window.setInterval(...) .

Тодорхойлогчийг setTimeout аргаар үүсгэсэн ажлуудад мөн оноож болно. Бүх таймер ID нь бие биенээсээ ялгаатай байх ёстой (одоогийн хөтөчийн цонхонд өвөрмөц). Дараа нь та хойшлогдсон үйлдлүүдийг ашигладаг цонхон дээр хэд хэдэн өөр даалгавруудыг үүсгэж болох бөгөөд эдгээр ажлуудыг зэрэгцүүлэн гүйцэтгэх болно (хэрэв компьютер хангалттай нөөцтэй бол нэгэн зэрэг) энэ нь PHP эсвэл VBS дээр үндсэндээ боломжгүй юм.

Хэд хэдэн Javascript таймер зэрэг ажиллаж байгаа хуудасны жишээг энд үзүүлэв: setinterval.htm (setinterval.js файл дахь Javascript функцууд). Бүх хуудасны цаг хэмжигчийг (цэсээс бусад) Esc товчлуурыг ашиглан зогсоож болно. Бүх жишээ таймерууд нь "байгалийн" (хийсвэр i++ биш) цаг эсвэл зайн тооллого дээр суурилдаг. Бүх "цаг" нь тусгайлан синхрончлогддоггүй (тодорхой болгохын тулд). Зайнаас хамаарах цаг хэмжигчийг "заагч" болон доош буулгах ("татах") цэсэнд ашигладаг.

Манай гулсдаг цэс үнэхээр гулсаж байна ("толгойн" доороос): элементүүдийн хооронд тусгайлан цоорхой үлдээсэн тул та хэрхэн гулсаж байгааг харах боломжтой. Гэнэтийн байдлаар бид янз бүрийн урттай жагсаалтад гарах гарцыг жигд болгож чадахгүй байгаа нь компьютерийн гүйцэтгэл багатай (AMD Athlon 999 MHz) холбоотой байж магадгүй юм.

Гоо сайхан, эв найрамдлын хувьд янз бүрийн цэсийн жагсаалтууд нэгэн зэрэг гарч ирэх ёстой нь ойлгомжтой. Өөрөөр хэлбэл, урт жагсаалтууд илүү олон жагсаалтаас гарах ёстой өндөр хурд, богино нь - бага хурдтай. Үүнийг дараах байдлаар хэрэгжүүлэх боломжтой юм шиг санагдаж байна.

Энэ логикоор, хэрэв унждаг жагсаалт 200px өндөр байвал бид үүнийг 1 мс тутамд нэг пикселээр доошлуулах ёстой. Гэхдээ ийм хурд нь манай компьютер дээр ажиллахгүй байна - хөтөч нь жагсаалтын шинэ байрлалыг нэг миллисекундэд зурах цаг байхгүй. Тиймээ. Javascript тоолж чаддаг (тоолох зүйл юу вэ?), гэхдээ хөтөч (Firefox) харуулах цаг алга. Вэбийн ердийн нөхцөл байдал.

Тиймээс зөвхөн суга таягны тусламжтайгаар цэс гарах цагийг их бага хэмжээгээр тэнцүүлэх боломжтой бөгөөд энэ нь илүү удаан үргэлжлэх нь тодорхойгүй хэвээр байна. хурдан компьютер. Гэхдээ бид хамгийн удаанд нь найдах ёстой биз дээ? Алгоритм (компьютерийн хурдыг тооцохгүйгээр) дараах байдалтай байна.

Одоо жагсаалтууд их бага хэмжээгээр гарч байна. Илүү их эсвэл бага ижил төстэй хугацаанд. setinterval.htm хуудсан дээр.

Тэгээд энд Брюс ирж байна:

Slide_do функц (obj, maxtop, офсет) ( 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 файлд. Тийм ээ, мөн хавсаргасан загварын файлгүйгээр энэ новш огт ажиллахгүй

JavaScript таймер хэрхэн ажилладагийг ойлгох нь маш чухал юм. Ихэнхдээ тэдний зан авир нь бидний олон урсгалын талаарх зөн совингийн ойлголттой таардаггүй бөгөөд энэ нь бодит байдал дээр тэдгээрийг нэг хэлхээнд гүйцэтгэдэгтэй холбоотой юм. Цаг хэмжигчийг удирдах дөрвөн функцийг авч үзье.

• var id = setTimeout(fn, саатал); - Өгөгдсөн саатлын дараа өгөгдсөн функцийг дуудах энгийн таймер үүсгэнэ. Энэ функц нь таймерыг түр зогсоох боломжтой өвөрмөц ID-г буцаана.
• var id = setInterval(fn, саатал); - setTimeout-тай төстэй боловч тодорхой интервалд (зогсоох хүртэл) функцийг тасралтгүй дууддаг.
• clearInterval(id);, clearTimeout(id); - Цаг хэмжигч ID-г (дээр тайлбарласан функцүүдийн аль нэгээр нь буцаана) хүлээн авч, буцаан дуудлагын гүйцэтгэлийг зогсооно"a.

Энэ зурагт маш их мэдээлэл байгаа боловч үүнийг ойлгох нь танд JavaScript асинхрон хэрхэн ажилладаг талаар илүү гүнзгий ойлголт өгөх болно. Энэ диаграм нь цагийг босоогоор миллисекундээр илэрхийлдэг бол цэнхэр блокууд нь гүйцэтгэсэн JavaScript кодын блокуудыг харуулдаг. Жишээлбэл, эхний блок дунджаар 18 мс-д гүйцэтгэгддэг бол хулганаар товших нь гүйцэтгэлийг 11 мс орчим хаадаг гэх мэт.

JavaScript нь зөвхөн нэг хэсэг кодын гүйцэтгэх боломжтой (гүйцэтгэлийн нэг урсгалтай шинж чанараас шалтгаалан) тус бүр нь бусад асинхрон үйл явдлын гүйцэтгэлийг блоклодог. Энэ нь асинхрон үйл явдал тохиолдоход (хулгана товших, таймер дуудах эсвэл XMLHttp хүсэлтийг дуусгах гэх мэт) дараалалд нэмж дараа нь гүйцэтгэнэ (хэрэгжилт нь хөтчөөс хамаарч өөр өөр байх нь мэдээжийн хэрэг, гэхдээ зөвшөөрье. үүнийг "дараалал" гэж нэрлэнэ).

Эхлэхийн тулд JavaScript блок дотор хоёр таймер эхэлдэг гэж төсөөлөөд үз дээ: setTimeout нь 10 мс-ийн сааталтай, setInterval нь ижил сааталтай. Таймер хэзээ эхлэхээс шалтгаалаад бид эхний кодын блокыг дуусгаж амжаагүй үед энэ нь асах болно. Гэсэн хэдий ч тэр даруй шатдаггүй гэдгийг анхаарна уу (энэ нь нэг урсгалтай тул боломжгүй). Үүний оронд хойшлуулсан функцийг дараалалд оруулж, дараагийн боломжтой мөчид гүйцэтгэнэ.

Мөн эхний JavaScript блокыг гүйцэтгэх явцад хулганы товшилт гарч ирдэг. Энэ асинхрон үйл явдлын зохицуулагчийг (мөн бид үүнийг урьдчилан таамаглах боломжгүй учраас асинхрон байна) яг одоо шууд ажиллах боломжгүй тул таймер шиг дараалалд ордог.

JavaScript кодын эхний блокыг ажиллуулсны дараа хөтөч "Юу ажиллахыг хүлээж байна вэ?" Гэсэн асуултыг тавьдаг. IN энэ тохиолдолдХулгана товших зохицуулагч болон таймер хүлээгдэж буй төлөвт байна. Хөтөч нь тэдгээрийн аль нэгийг нь (товшилтын зохицуулагч) сонгож, гүйцэтгэдэг. Цаг хэмжигч нь гүйцэтгэх дараалалд дараагийн боломжтой хэсгийг хүлээх болно.

Хулганы товшилтыг ажиллуулж байх үед эхний интервал-буцах дуудлагыг ажиллуулдаг болохыг анхаарна уу. Цаг хэмжигч-буцах дуудлагатай адил дараалалд орно. Гэсэн хэдий ч, интервал дахин асах үед (цаг хэмжигч-буцах дуудлага ажиллаж байх үед) дараалалаас хасагдах болно гэдгийг анхаарна уу. Хэрэв их хэмжээний код ажиллаж байх үед бүх интервалын дуудлагууд дараалалд орсон бол энэ нь дуудагдахаар хүлээгдэж буй олон функцийг хүлээхэд хүргэдэг бөгөөд тэдгээрийн хооронд ямар ч саатал гарахгүй, үүний оронд хөтчүүд ямар ч функц байхгүй болтол хүлээх хандлагатай байдаг дараалалд өөр нэгийг нэмэхээс өмнө дараалалд үлдээсэн.

Тиймээс бид интервал-буцах дуудлагын гурав дахь удаагийн ажиллагаа нь аль хэдийн гүйцэтгэсэн үетэй давхцаж байгаа тохиолдлыг ажиглаж болно. Энэ нь нэг чухал зүйлийг харуулж байна: интервалууд нь одоо ажиллаж байгаа зүйлд хамаагүй, гүйцэтгэлийн хоорондох саатлын хугацааг харгалзахгүйгээр дараалалд нэмэгдэх болно.

Эцэст нь, хоёр дахь интервал-буцах дуудлагыг дуусгасны дараа бид JavaScript хөдөлгүүрийг ажиллуулахад юу ч үлдэхгүй байгааг харах болно. Энэ нь хөтөч шинэ асинхрон үйл явдлууд гарахыг дахин хүлээж байна гэсэн үг юм. Энэ нь 50 мс-ийн тэмдэглэгээнд тохиолдох бөгөөд интервал-буцах дуудлага дахин ажиллах болно. Энэ үед үүнийг хаах зүйл байхгүй тул тэр даруй ажиллах болно.

setTimeout болон setInterval хоёрын ялгааг сайхан харуулсан жишээг харцгаая.
setTimeout(function())( /* Зарим урт кодын блок... */ setTimeout(arguments.callee, 10); ), 10);
setInterval(function())( /* Зарим урт кодын блок... */ ), 10);

Эдгээр хоёр сонголт нь эхлээд харахад ижил төстэй боловч бодит байдал дээр тийм биш юм. setTimeout ашигласан код нь өмнөх дуудлагын дараа үргэлж дор хаяж 10 ms-ийн сааталтай байх болно (илүү их байж болно, гэхдээ хэзээ ч багагүй), харин setInterval-ийг ашигладаг код нь өмнөх дуудлага хэзээ болсоноос үл хамааран 10 мс тутамд дуудагдах хандлагатай байдаг.
Дээр дурдсан бүх зүйлийг нэгтгэн дүгнэж үзье:
- setTimeout болон setInterval функцууд нь асинхрон кодонд үндсэндээ ялгаатай,
- Хэрэв таймерыг ажиллуулах боломжгүй бол одоогоор, энэ нь дараагийн гүйцэтгэлийн цэг хүртэл хойшлогдох болно (энэ нь хүссэн сааталаас илүү урт байх болно),
- Интервалууд (setInterval) нь хэрэв тэдгээрийн гүйцэтгэл нь заасан сааталаас удаан үргэлжилбэл хойшлогдохгүйгээр ар араасаа хийгдэж болно.

Энэ бүхэн туйлын чухал мэдээлэлхөгжлийн төлөө. JavaScript хөдөлгүүр хэрхэн ажилладаг, ялангуяа олон тооны асинхрон үйл явдлууд (энэ нь ихэвчлэн тохиолддог) талаар мэдэх нь дэвшилтэт програмуудыг бүтээхэд маш сайн суурийг тавьдаг.

Эх сурвалж: http://learn.javascript.ru/settimeout-setinterval

Бараг бүх JavaScript программууд нь тодорхой хугацааны дараа дуудагдах функцийг төлөвлөх боломжийг олгодог дотоод таймер хуваарьтай байдаг.

Ялангуяа энэ функцийг хөтөч болон Node.JS серверт дэмждэг.

Синтакс:

Параметрүүд:

• функц/код
  • Гүйцэтгэх функц эсвэл кодын мөр.
  • Мөр нь нийцтэй байх үүднээс хадгалагдсан бөгөөд хэрэглэхийг зөвлөдөггүй.
• функц
  • Миллисекунд дахь хоцролт, 1000 миллисекунд нь 1 секундтэй тэнцэнэ.
• arg1, arg2…
  • Функц руу дамжуулах аргументууд. IE9-д дэмжигдээгүй.
  • Функц нь саатлын параметрт заасан хугацааны дараа ажиллана.

Жишээлбэл, дараах код нь нэг секундын дараа сэрэмжлүүлэг("Сайн байна уу") өдөөх болно:

Хэрэв эхний аргумент нь тэмдэгт мөр бол орчуулагч тухайн мөрөөс нэргүй функц үүсгэдэг.

Өөрөөр хэлбэл, энэ оруулга яг адилхан ажилладаг:

SetTimeout("anert("Сайн уу")" , 1000 );

Оронд нь үл мэдэгдэх функцуудыг ашиглана уу:

SetTimeout(функц () ( alert("Сайн уу" ) ), 1000 );

Бүгдээрээ орчин үеийн хөтөчӨгөгдсөн IE10, setTimeout нь функцийн параметрүүдийг тодорхойлох боломжийг танд олгоно.

Доорх жишээнд "Сайн уу, би Вася байна" гэж IE9-ээс бусад бүх газарт гаргана.

...Гэхдээ ихэнх тохиолдолд бидэнд хуучин IE-ийн дэмжлэг хэрэгтэй байдаг бөгөөд энэ нь танд аргументуудыг зааж өгөхийг зөвшөөрдөггүй. Тиймээс, тэдгээрийг шилжүүлэхийн тулд тэд дуудлагыг нэргүй функцээр боож өгдөг.

setTimeout-г дуудах нь энэ контекстийг нэвтрүүлэхгүй.

Ялангуяа setTimeout-ээр дамжуулан объектын аргыг дуудах нь дэлхийн нөхцөлд ажиллах болно. Энэ нь буруу үр дүнд хүргэж болзошгүй.

Жишээлбэл, нэг секундын дараа user.sayHi()-г дуудъя:

setTimeout нь user.sayHi функцийг глобал контекст дээр ажиллуулах тул үүгээр дамжуулан объект руу хандах эрхгүй болно.

Өөрөөр хэлбэл, setTimeout-ийн эдгээр хоёр дуудлага нь ижил зүйлийг хийдэг:

Аз болоход, энэ асуудлыг завсрын функцийг бий болгосноор амархан шийдэгддэг.

Аргументуудыг хөтчөөр дамжуулж, гүйцэтгэлийн контекстийг хадгалахын тулд ороох функцийг ашигладаг.

setTimeout функц нь үйлдлийг цуцлахад ашиглаж болох timerId-г буцаана.

Синтакс:

ClearTimeout(timemerId)

Дараах жишээн дээр бид завсарлага тогтоож, дараа нь устгасан (бодол санаагаа өөрчилсөн). Үүний үр дүнд юу ч тохиолддоггүй.

setInterval арга нь setTimeout-тай төстэй синтакстай.

Аргументуудын утга нь адилхан. Гэхдээ setTimeout-аас ялгаатай нь энэ нь функцийг нэг удаа ажиллуулдаггүй, харин тодорхой хугацааны интервалаар тогтмол давтдаг. Та дараах руу залгаж гүйцэтгэлийг зогсоож болно:

ClearInterval(timemerId)

Дараах жишээг ажиллуулж байх үед таныг Зогсоох товчийг дарах хүртэл хоёр секунд тутамд мессеж гарч ирнэ.

var timer = setInterval(функц () ( alert(i++) ), 2000 );

setInterval дээр дуудлагыг дараалалд оруулах, давхарлах

setInterval(функц, саатал) дуудлага нь тухайн функцийг заасан хугацааны интервалаар гүйцэтгэхэд хүргэдэг. Гэхдээ энд нэг нарийн зүйл бий.

Үнэн хэрэгтээ, дуудлагын хоорондох завсарлага нь заасан интервалаас бага байна.

Өөрөөр хэлбэл, хөтөч нь функцийг гүйцэтгэх хугацааг харгалзахгүйгээр 100 мс тутамд функцийг эхлүүлэх ажлыг эхлүүлдэг.

Функцийн гүйцэтгэл нь сааталаас илүү удаан үргэлжлэх тохиолдол гардаг. Жишээлбэл, функц нь нарийн төвөгтэй боловч саатал бага байна. Эсвэл функц нь гүйцэтгэлийн урсгалыг блоклодог анхааруулга / баталгаажуулах / шуурхай мэдэгдлүүдийг агуулдаг. Эндээс л бүх зүйл сонирхолтой болж эхэлдэг.

Хөтөч завгүй байгаа тул функцийг эхлүүлэх боломжгүй бол хөтөч чөлөөтэй болмогц дараалалд орж, ажиллана.

Доорх зураг нь гүйцэтгэхэд удаан хугацаа шаардагддаг функцэд юу тохиолдохыг харуулж байна.

setInterval-ийн эхлүүлсэн функцийн дуудлагыг дараалалд нэмж, боломжтой үед шууд хийгдэнэ:

Функцийг хоёр дахь удаагаа эхлүүлэх нь эхнийх нь дууссаны дараа шууд явагдана.

Гүйцэтгэлийг нэгээс олон удаа дараалалд оруулдаггүй.

Хэрэв функц нь хэд хэдэн төлөвлөсөн гүйцэтгэлээс илүү удаан ажиллах юм бол энэ нь нэг удаа дараалалд орох болно. Тиймээс хөөргөх "хуримтлал" байхгүй.

Доорх зурган дээр setInterval нь функцийг 200 мс-д гүйцэтгэхийг оролдож, дуудлагын дараалалд оруулдаг. 300 ба 400 мс-д таймер дахин сэрдэг ч юу ч болохгүй.

setInterval(функц, саатал)-г дуудах нь гүйцэтгэлийн хоорондох бодит саатлыг баталгаажуулахгүй.

Бодит саатал нь заасан хугацаанаас их, бага байх тохиолдол байдаг. Ер нь бага ч болов удаашралтай байна гэдэг үнэн биш.

Зөвхөн тогтмол давталт хийх шаардлагагүй, гэхдээ гүйлтийн хооронд саатал шаардлагатай тохиолдолд setTimeout нь функцийг гүйцэтгэх бүрд дахин тохируулахад ашиглагддаг.

Тэдний хооронд 2 секундын зайтай дохио өгдөг жишээг доор харуулав.

var timer = setTimeout(функц ажиллуулах () ( дохиолол(i++); таймер = setTimeout(ажиллуулах, 2000 ); ), 2000 );

Таймерын хамгийн бага саатал

Хөтөчийн таймер нь хамгийн бага хоцрогдолтой байна. Энэ нь орчин үеийн хөтөч дээр ойролцоогоор тэгээс 4 мс хооронд хэлбэлздэг. Хуучин хүмүүст энэ нь илүү урт бөгөөд 15 мс хүрч болно.

Стандартын дагуу хамгийн бага саатал нь 4 мс байна. Тиймээс setTimeout(..,1) ба setTimeout(..,4) хоёрын хооронд ялгаа байхгүй.

Зарим тохиолдолд саатал нь 4ms биш, харин 30ms эсвэл бүр 1000ms байж болно.

Ихэнх хөтчүүд (үндсэндээ ширээний компьютерууд) таб идэвхгүй байсан ч setTimeout / setInterval-ийг үргэлжлүүлэн ажиллуулдаг. Үүний зэрэгцээ тэдгээрийн хэд хэдэн нь (Chrome, FF, IE10) хамгийн бага таймер давтамжийг секундэд 1 удаа багасгадаг. Таймер нь "арын дэвсгэр" таб дээр ажиллах болно, гэхдээ ховор.

Зөөврийн компьютер дээр батерейгаар ажиллах үед хөтчүүд код гүйцэтгэх давтамжийг багасгаж, батарейны цэнэгийг хэмнэх боломжтой. IE ялангуяа үүгээрээ алдартай. Тохиргооноос хамааран бууралт хэд хэдэн удаа хүрч болно. Хэрэв CPU-ийн ачаалал хэт өндөр байвал JavaScript цаг хэмжигчийг цаг тухайд нь боловсруулах боломжгүй байж магадгүй юм. Энэ нь зарим setInterval гүйлтийг алгасах болно.

Дүгнэлт: 4 мс давтамж дээр анхаарлаа хандуулах нь зүйтэй, гэхдээ та үүнд найдах ёсгүй.

Консол руу интервалыг гаргах Дуудлагын хоорондох хугацааны интервалыг тоолох код нь дараах байдалтай харагдана.

Энэхүү заль мэх нь JavaScript-ийн хакеруудын түүхэнд орох нь зүйтэй юм.

Хэрэв та одоогийн скрипт дууссаны дараа үүнийг ажиллуулахыг хүсвэл функц нь setTimeout(func, 0)-д ороосон байна.

Хамгийн гол нь setTimeout хэзээ ч тэр функцийг шууд гүйцэтгэдэггүй. Тэр зөвхөн түүний хэрэгжилтийг төлөвлөдөг. Гэхдээ JavaScript орчуулагч нь одоогийн скриптийг ажиллуулсны дараа л төлөвлөсөн функцуудыг гүйцэтгэж эхэлнэ.

Стандартын дагуу setTimeout ямар ч байсан 0-ийн сааталтай функцийг гүйцэтгэж чадахгүй. Өмнө нь хэлсэнчлэн саатал нь ихэвчлэн 4 мс байх болно. Гэхдээ энд гол зүйл бол ямар ч тохиолдолд гүйцэтгэл нь одоогийн кодыг хэрэгжүүлсний дараа явагдах болно.

Жишээ нь:

setInterval(функ, саатал) болон setTimeout(функ, саатал) аргууд нь танд func-ийг миллисекунд саатал бүрт нэг удаа тогтмол ажиллуулах боломжийг олгодог.

Хоёр арга хоёулаа таймер ID-г буцаана. Энэ нь clearInterval / clearTimeout дуудаж гүйцэтгэлийг зогсооход хэрэглэгддэг.

| | setInterval | setTimeout | || ----------- | ---------- | | Хугацаа | Дуудлага нь цаг хэмжигч дээр байна. Хэрэв орчуулагч завгүй бол нэг дуудлага дараалалд орно. Функцийг гүйцэтгэх хугацааг тооцохгүй тул нэг гүйлтийн төгсгөлөөс нөгөө гүйлтийн эхлэл хүртэлх хугацааны интервал өөр байж болно. | Гүйцэтгэлийн хооронд тогтмол түр зогсолт хийх шаардлагатай үед setInterval-ын оронд setTimeout руу рекурсив дуудлагыг ашигладаг. | | Саатал | Хамгийн бага саатал: 4ms. | Хамгийн бага саатал: 4ms. | | Хөтөчийн онцлогууд | IE | дээр хоцролт 0 ажиллахгүй Opera дээр тэг хоцролт нь 4ms-тэй тэнцдэг бөгөөд стандарт бус 1ms, 2ms, 3ms зэрэг бусад сааталуудыг нарийн зохицуулдаг. |