Կրկնել գործողությունները javascript-ի սահմանված ժամանակային ընդմիջումով: jQuery ֆունկցիայի setTimeout() օրինակներ

SetInterval() մեթոդը, որն առաջարկվում է Window և Worker ինտերֆեյսներում, բազմիցս կանչում է ֆունկցիա կամ կատարում է կոդի հատված՝ յուրաքանչյուր զանգի միջև ֆիքսված ժամանակի ուշացումով:

նույն պատճառներով, որոնք eval()-ի օգտագործումը դարձնում են անվտանգության ռիսկ: ուշացում Ժամանակը, միլիվայրկյաններով (վայրկյան հազարերորդականներով), ժմչփը պետք է հետաձգվի նշված ֆունկցիայի կամ կոդի կատարման միջև: Հետաձգման արժեքների թույլատրելի միջակայքի վերաբերյալ մանրամասների համար տե՛ս ստորև: arg1, ..., argN Ընտրովի Լրացուցիչ արգումենտներ, որոնք փոխանցվում են նշված ֆունկցիային

Նշում. Առաջին շարահյուսության մեջ setInterval()-ին լրացուցիչ արգումենտներ փոխանցելը չի ​​աշխատում

Internet Explorer

9 և ավելի վաղ: Եթե ​​ցանկանում եք միացնել այս գործառույթը տվյալ դիտարկիչում, դուք պետք է օգտագործեք պոլիֆիլմ (տես բաժինը):

Վերադարձված ինտերվալի ID-ն թվային, ոչ զրոյական արժեք է, որը նույնականացնում է 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 == "կարմիր"? "blue": "կարմիրը" եռակի օպերատոր է: ) ֆունկցիա 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 Typewriter - MDN Օրինակ գործառույթ Գրամեքենա (sSelector, nRate) (function clean () (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 in 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. In tincidunt tincidunt tincidunt.

JavaScript գրամեքենա
Nullam commodo suscipit lacus non aliquet. 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 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 in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.

Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, 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. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Նուլլա հեշտ. 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 mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies 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.

Ինչպես նախկինում քննարկվել է, 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(); // տպում է «zero, one, two» 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 թ. // սխալ. setTimeout.call (myArray, myArray.myMethod, 2500, 2);

Ինչպես տեսնում եք, այս օբյեկտը ժառանգական 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);

Այս երկու փոխարինումները նաև հնարավորություն են տալիս կամայական արգումենտների HTML5 ստանդարտ փոխանցումը դեպի IE-ի ժամանակաչափերի հետ կանչման գործառույթները: Այսպիսով, դրանք կարող են օգտագործվել որպես ստանդարտներին չհամապատասխանողպոլիֆիլներ նույնպես: Տես ա ստանդարտներին համապատասխան polyfill.

Նոր հնարավորությունների թեստ.

MyArray = [«զրո», «մեկ», «երկու»]; myArray.myMethod = ֆունկցիա (sProperty) ( alert(arguments.length > 0 ? this : this); ); setTimeout (զգուշացում, 1500, «Բարև աշխարհ!»); // setTimeout-ի և setInterval-ի ստանդարտ օգտագործումը պահպանված է, բայց... setTimeout.call(myArray, myArray.myMethod, 2000); // տպում է «zero, one, two» 2 վայրկյան հետո setTimeout.call (myArray, myArray.myMethod, 2500, 2); // տպում է «երկու» 2,5 վայրկյան հետո

Դրա ավելի բարդ, բայց դեռ մոդուլային տարբերակի համար ( Դեյմոն) տես JavaScript Daemons Management-ը: Այս ավելի բարդ տարբերակը ոչ այլ ինչ է, քան մեթոդների մեծ և մասշտաբային հավաքածու Դեյմոնկոնստրուկտոր. Այնուամենայնիվ, ի Դեյմոնկոնստրուկտորն ինքնին ոչ այլ ինչ է, քան կլոն MiniDaemonհավելյալ աջակցությամբ սկզբումև սկիզբըգործարկման ընթացքում հայտարարված գործառույթները դեյմոն. Այսպիսով, MiniDaemonշրջանակը մնում է առաջարկվող միջոց պարզ անիմացիաների համար, քանի որ Դեյմոնառանց իր մեթոդների հավաքածուի, ըստ էության, դրա կլոնն է:

MiniDaemon-ը փաստարկներ է փոխանցում հետ կանչելու ֆունկցիային: Եթե ​​ցանկանում եք դրա վրա աշխատել բրաուզերների հետ, որոնք բնիկորեն չեն աջակցում այս հատկությունը, օգտագործեք վերը առաջարկված մեթոդներից մեկը:

var myDaemon = նոր MiniDaemon( այս օբյեկտը, հետադարձ զանգ[ , տոկոսադրույքը [, երկարությունը]]);

SetInterval() ֆունկցիան սովորաբար օգտագործվում է ուշացում սահմանելու համար, որոնք կրկին ու կրկին կատարվում են, օրինակ՝ անիմացիաները: Դուք կարող եք չեղարկել միջակայքը՝ օգտագործելով WindowOrWorkerGlobalScope.clearInterval()-ը:

Եթե ​​ցանկանում եք կանչել ձեր ֆունկցիան մեկ անգամնշված ուշացումից հետո օգտագործեք .

Հնարավոր է, որ ինտերվալները տեղադրվեն, այսինքն՝ setInterval()-ի հետ կանչն իր հերթին կարող է զանգահարել setInterval()՝ սկսելու մեկ այլ ինտերվալ, թեև առաջինը դեռ շարունակվում է: Դա մեղմելու հնարավոր ազդեցությունը: կատարողականությունը, երբ ինտերվալները տեղադրվեն հինգ մակարդակից ավելի, զննարկիչը ինքնաբերաբար կկիրառի 4 մվ նվազագույն արժեք՝ setInterval()-ին 4 մվ-ից պակաս արժեք նշելու փորձերը:

Բրաուզերները որոշ հանգամանքներում կարող են կիրառել ավելի խիստ նվազագույն արժեքներ միջակայքի համար, թեև դրանք չպետք է սովորական լինեն: Նկատի ունեցեք նաև, որ հետադարձ զանգերի միջև ընկած իրական ժամանակը կարող է ավելի երկար լինել, քան նշված ուշացումը. Օրինակների համար տե՛ս WindowOrWorkerGlobalScope.setTimeout()-ում նշվածից ավելի երկար ձգձգումների պատճառները:

Եթե ​​կա հավանականություն, որ ձեր տրամաբանությունը կարող է ավելի երկար տևել, քան ինտերվալի ժամանակը, խորհուրդ է տրվում ռեկուրսիվ կերպով զանգահարել անվանված ֆունկցիա՝ օգտագործելով setTimeout() ։ Օրինակ, եթե օգտագործեք setInterval() հեռավոր սերվերի հարցում յուրաքանչյուր 5 վայրկյանը մեկ, ցանցի հետաձգումը, չպատասխանող սերվերը և մի շարք այլ խնդիրներ կարող են խանգարել հարցումն ավարտին հասցնել իր հատկացված ժամանակում: Որպես այդպիսին, դուք կարող եք հայտնվել հերթագրված XHR հարցումներով, որոնք պարտադիր չէ, որ վերադառնան կարգով:

Սցենարավորման լեզուներով ծրագրավորման ժամանակ պարբերաբար անհրաժեշտություն է առաջանում ստեղծել դադար՝ որոշ ժամանակով դադարեցնել ծրագրի կատարումը, այնուհետև շարունակել աշխատել։ Օրինակ, VBS և PHP սկրիպտներում հնարավոր են հետևյալ մեթոդները.

VBS՝ wscript.sleep 1500 (դադար 1,5 վայրկյան)

PHP՝ քուն (10); (Կանգնեք 10 վայրկյան)

Նման դադարների ժամանակ գործարկման ժամանակի համակարգը (PHP կամ VBS) ոչինչ չի անում. Ծրագրավորողը, որը փորձում է ինտուիտիվ կերպով օգտագործել Javascript-ում նման բան, տհաճորեն կզարմանա: Ընդհանուր սխալերբ փորձում եք Javascript-ում դադար ստեղծել, այն կարծես հետևյալն է.

Ֆունկցիան badtest() ( (var i=1; i< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }

Դուք կարծում եք, որ երբ հերթը հասնում է հաջորդ համարը նկարելուն, ձեր setTimeout-ն անկեղծորեն կդադարեցնի Javascript-ի աշխատանքը, սպասեք 0,9 վայրկյան, ավելացրեք ցանկալի թիվը մուտքագրման դաշտի վերջում և այնուհետև կշարունակեք աշխատել: Բայց իրականում դա ճիշտ չէ. setInterval-ը և setTimeout-ը Javascript-ում միայն հետաձգում են փակագծերում նշված գործողության (կամ ֆունկցիայի) կատարումը: Մեր օրինակում տեղի կունենա հետևյալը.

Անմիջապես նշանակում է, օրինակ, 1 ms (այսինքն՝ անհամաչափ փոքր՝ 900 ms-ի համեմատ). հանգույցը կկատարի իր աշխատանքը գրեթե ակնթարթորեն՝ ստեղծելով մի քանի հետաձգված առաջադրանքներ ժամանակի նույն կետից: Սա նշանակում է, որ բոլոր առկախ «գծագրման» առաջադրանքները կկատարվեն գրեթե միաժամանակ՝ առանց նոր թվեր ավելացնելու միջև ընդմիջումների: Ցիկլը սկսվում է; ամեն ինչ սառչում է 0,9 վրկ; և shirr - բոլոր թվերը անընդմեջ նկարահանվում են մեկը մյուսի հետևից:

Ինչպե՞ս ճիշտ կիրառել setTimeout-ը նման դեպքում: Բարդ է։ Դուք պետք է զանգահարեք գործառույթը ռեկուրսիվ կերպով(գործառույթի ներսում նույն գործառույթը), և որպեսզի այս գործընթացը անվերջ չլինի, սահմանեք դադարեցման պայման (օրինակ՝ տպվող թվի չափը).

Ֆունկցիան welltest() (եթե (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }

Իսկ i փոփոխականը պետք է սկզբնավորվի ֆունկցիայից դուրս, օրինակ՝ այսպես.

Այժմ ամեն ինչ աշխատում է այնպես, ինչպես պետք է (մենք կրճատեցինք ուշացման ժամանակը 0,9 վ-ից մինչև 0,4 վրկ): Բայց նման առաջադրանքների համար ավելի տրամաբանական է օգտագործել setInterval-ը, քան setTimeout-ը (չնայած դա կպահանջի երկու գործառույթ).

Function besttest() ( window.i = 0 window.timer1 = window.setInterval("draw()", 400) ) ֆունկցիա draw() ( document.getElementById("test3").արժեք += ++i if (i >= 9) clearInterval(window.timer1))

Javascirpt setInterval մեթոդի առանձնահատկությունն այն է, որ այն չի անցնում «ինքնուրույն», այն պետք է դադարեցվի հատուկ clearInterval մեթոդով. Եվ որպեսզի պարզ լինի, թե կոնկրետ ինչն է պետք դադարեցնել, հետաձգված գործողության առաջադրանքը նշանակվում է հատուկ նույնացուցիչ՝ ժամանակաչափ՝ window.timer1 = window.setInterval(...) :

Նույնացուցիչներ կարող են վերագրվել նաև setTimeout մեթոդով ստեղծված առաջադրանքներին: Բոլոր ժամանակաչափի ID-ները պետք է տարբեր լինեն միմյանցից (եզակի դիտարկիչի ընթացիկ պատուհանում): Այնուհետև կարող եք պատուհանում ստեղծել մի քանի տարբեր առաջադրանքներ, որոնք օգտագործում են հետաձգված գործողություններ, և այդ առաջադրանքները կկատարվեն զուգահեռ (մի տեսակ միաժամանակ, եթե համակարգիչը բավարար ռեսուրսներ ունի), ինչը հիմնականում անհնար է PHP-ում կամ VBS-ում:

Ահա մի էջի օրինակ, որտեղ մի քանի Javascript ժամանակաչափեր են աշխատում՝ setinterval.htm (Javascript-ի գործառույթները setinterval.js ֆայլում): Էջի բոլոր ժամանակաչափերը (բացի մենյուից) կարող են դադարեցվել Esc ստեղնով: Բոլոր օրինակային ժամանակաչափերը հիմնված են «բնական» (և ոչ վերացական i++) հետհաշվարկի վրա՝ ժամանակի կամ հեռավորության վրա: Բոլոր «ժամացույցները» հատուկ ապասինխրոնացված են (պարզության համար): Հեռավորությունից կախված ժամանակաչափերն օգտագործվում են «ցուցանիշում» և բացվող («հանում») ընտրացանկում:

Մեր լոգարիթմական ընտրացանկը իրականում սահում է («վերնագրի» տակից). տարրերի միջև հատուկ բացեր են թողնվում, որպեսզի տեսնեք, թե ինչպես է այն դուրս սահում: Անսպասելիորեն պարզվեց, որ մենք չկարողացանք ելքը նույնքան հարթ դարձնել տարբեր երկարությունների ցուցակների համար, հավանաբար համակարգչի ցածր կատարողականության պատճառով (AMD Athlon 999 ՄՀց):

Միանգամայն ակնհայտ է, որ գեղեցկության և ներդաշնակության համար անհրաժեշտ է, որ ճաշացանկի տարբեր տարրերի ցուցակները հայտնվեն միաժամանակ։ Այսինքն, ավելի երկար ցուցակները պետք է դուրս գան ավելի շատով բարձր արագություն, ավելի կարճները՝ ավելի ցածր արագությամբ։ Թվում է, որ այն կարող է իրականացվել այսպես.

Այս տրամաբանությամբ, եթե բացվող ցուցակը 200px բարձր է, մենք պետք է այն տեղափոխենք մեկ պիքսել ներքև յուրաքանչյուր 1մս-ում: Բայց նման արագությունը մեր համակարգչում չի աշխատում. զննարկիչը պարզապես ժամանակ չունի ցուցակի նոր դիրքը մեկ միլիվայրկյանում նկարելու համար: Այո՛։ Javascript-ին հաջողվում է հաշվել (ի՞նչ կա հաշվել), բայց բրաուզերը (Firefox) ցուցադրելու ժամանակ չունի։ Տիպիկ իրավիճակ համացանցի համար.

Հետևաբար, միայն հենակների օգնությամբ կարելի է քիչ թե շատ հավասարեցնել մենյուի մեկնման ժամանակը, և դեռ պարզ չէ, թե ինչպես դա կաշխատի ավելիի համար: արագ համակարգիչ. Բայց մենք պետք է հույս դնենք ամենադանդաղի վրա, չէ՞: Ալգորիթմը (առանց համակարգչի արագությունը հաշվի առնելու) ստացվում է այսպիսի բան.

Հիմա ցուցակները քիչ թե շատ դուրս են գալիս։ Քիչ թե շատ նման ժամանակի համար։ setinterval.htm էջում։

Եվ ահա Բրյուսը գալիս է.

Slide_do ֆունկցիան (obj, maxtop, offset) ( if (getTopLeft(obj).վերև< 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 ms նշանի վրա, որտեղ կրկին կաշխատի ինտերվալ-զանգը: Այս պահին այն արգելափակելու ոչինչ չի լինի, ուստի այն անմիջապես կաշխատի:

Դիտարկենք մի օրինակ, որը գեղեցիկ կերպով ցույց է տալիս setTimeout-ի և setInterval-ի միջև եղած տարբերությունը:
setTimeout(function())( /* Կոդի որոշ երկար բլոկ... */ setTimeout(arguments.callee, 10); ), 10);
setInterval(function())( /* Կոդի որոշ երկար բլոկ... */ ), 10);

Այս երկու տարբերակներն առաջին հայացքից համարժեք են, իսկ իրականում՝ ոչ։ SetTimeout օգտագործող կոդը միշտ կունենա առնվազն 10 մվ ուշացում նախորդ զանգից հետո (այն կարող է լինել ավելի, բայց երբեք ավելի քիչ), մինչդեռ setInterval օգտագործող կոդը կկանչվի յուրաքանչյուր 10 մվ-ը՝ անկախ նրանից, թե երբ է եղել նախորդ զանգը:
Եկեք ամփոփենք վերը նշված ամեն ինչ.
- «SetTimeout» և «SetInterval» գործառույթները կատարվում են սկզբունքորեն տարբեր կերպ ասինխրոն կոդում,
- Եթե ժմչփը չի կարող գործարկվել այս պահին, այն կհետաձգվի մինչև կատարման հաջորդ կետը (որը ցանկալի ուշացումից ավելի երկար կլինի),
- Ինտերվալները (setInterval) կարող են իրականացվել մեկը մյուսի հետևից առանց ուշացման, եթե դրանց կատարումն ավելի երկար է տևում, քան նշված ուշացումը:

Այս ամենը ծայրահեղ է կարևոր տեղեկությունզարգացման համար։ Իմանալով, թե ինչպես է աշխատում JavaScript շարժիչը, հատկապես շատ ասինխրոն իրադարձությունների դեպքում (ինչը հաճախ տեղի է ունենում), հիանալի հիմք է ստեղծում առաջադեմ հավելվածներ ստեղծելու համար:

Աղբյուրը` http://learn.javascript.ru/settimeout-setinterval

Գրեթե բոլոր JavaScript իրականացումներն ունեն ներքին ժամանակաչափի ժամանակացույց, որը թույլ է տալիս պլանավորել ֆունկցիա, որը պետք է կանչվի որոշակի ժամանակահատվածից հետո:

Մասնավորապես, այս ֆունկցիան աջակցվում է բրաուզերներում և Node.JS սերվերում։

Շարահյուսություն:

Պարամետրեր:

• ֆունկ/կոդ
  • Գործառույթ կամ կոդի տող, որը պետք է կատարվի:
  • Տողը պահպանվում է համատեղելիության համար և խորհուրդ չի տրվում:
• ֆունկցիոնալ
  • Լատենտությունը միլիվայրկյաններով, 1000 միլիվայրկյան հավասար է 1 վայրկյանի:
• arg1, arg2…
  • Գործառույթին անցնելու փաստարկներ. Չի աջակցվում IE9-ում:
  • Ֆունկցիան կկատարվի հետաձգման պարամետրում նշված ժամանակից հետո:

Օրինակ, հետևյալ ծածկագիրը մեկ վայրկյանից հետո կաշխատի ազդանշան («Բարև»).

Եթե ​​առաջին արգումենտը տող է, ապա թարգմանիչը այդ տողից ստեղծում է անանուն ֆունկցիա։

Այսինքն, այս մուտքն աշխատում է ճիշտ նույնը.

SetTimeout ("զգուշացում("Բարև")", 1000);

Փոխարենը օգտագործեք անանուն գործառույթներ.

SetTimeout(function () ( alarm("Hello") ), 1000 );

Ընդհանրապես ժամանակակից բրաուզերներՀաշվի առնելով IE10-ը, setTimeout-ը թույլ է տալիս նշել ֆունկցիայի պարամետրերը:

Ստորև բերված օրինակը կարտադրի «Բարև, ես Վասյան եմ» ամենուր, բացառությամբ IE9-:

...Սակայն շատ դեպքերում մեզ անհրաժեշտ է աջակցություն հին IE-ից, և այն թույլ չի տալիս նշել փաստարկներ։ Հետևաբար, դրանք փոխանցելու համար նրանք զանգը փաթաթում են անանուն գործառույթով.

SetTimeout կանչելը չի ​​անցնում այս համատեքստը:

Մասնավորապես, setTimeout-ի միջոցով օբյեկտի մեթոդ կանչելը կաշխատի գլոբալ համատեքստում: Սա կարող է հանգեցնել սխալ արդյունքների:

Օրինակ, եկեք մեկ վայրկյան հետո զանգահարենք user.sayHi().

Քանի որ setTimeout-ը կաշխատի user.sayHi ֆունկցիան գլոբալ համատեքստում, այն չի ունենա մուտք դեպի օբյեկտ այս միջոցով:

Այլ կերպ ասած, setTimeout-ի այս երկու զանգերն անում են նույն բանը.

Բարեբախտաբար, այս խնդիրը նույնպես հեշտությամբ լուծվում է՝ ստեղծելով միջանկյալ ֆունկցիա.

Wrapper ֆունկցիան օգտագործվում է արգումենտները խաչաձև զննարկիչով փոխանցելու և կատարման համատեքստը պահպանելու համար:

SetTimeout ֆունկցիան վերադարձնում է ժամանակաչափ, որը կարող է օգտագործվել գործողությունը չեղարկելու համար:

Շարահյուսություն:

ClearTimeout (ժմչփի Id)

Հետևյալ օրինակում մենք սահմանել ենք ժամանակի ավարտ և այնուհետև ջնջել (մեր միտքը փոխել ենք): Արդյունքում ոչինչ չի լինում։

SetInterval մեթոդն ունի setTimeout-ի նման շարահյուսություն:

Փաստարկների իմաստը նույնն է. Բայց, ի տարբերություն setTimeout-ի, այն մեկ անգամ չի գործարկում ֆունկցիան, այլ այն պարբերաբար կրկնում է սահմանված ժամանակային ընդմիջումով: Դուք կարող եք դադարեցնել կատարումը՝ զանգահարելով.

ClearInterval (ժմչփի Id)

Հետևյալ օրինակը, երբ գործարկվի, յուրաքանչյուր երկու վայրկյանը մեկ կցուցադրի հաղորդագրություն, մինչև սեղմեք Stop կոճակը.

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

Զանգերի հերթագրում և ծածկում setInterval-ում

Զանգի setInterval (գործառույթ, հետաձգում) գործառույթը կատարում է նշված ժամանակային ընդմիջումով: Բայց այստեղ մի նրբություն կա.

Իրականում զանգերի միջև դադարն ավելի քիչ է, քան նշված միջակայքը:

Այսինքն՝ զննարկիչը սկսում է ֆունկցիայի գործարկումը կոկիկ յուրաքանչյուր 100 մս-ում՝ առանց հաշվի առնելու բուն ֆունկցիայի կատարման ժամանակը։

Պատահում է, որ ֆունկցիայի կատարումն ավելի երկար է տևում, քան ուշացումը։ Օրինակ, գործառույթը բարդ է, բայց ուշացումը փոքր է: Կամ գործառույթը պարունակում է զգոն / հաստատում / հուշում հայտարարություններ, որոնք արգելափակում են կատարման շարանը: Այստեղից ամեն ինչ սկսում է հետաքրքիր դառնալ:

Եթե ​​գործառույթը չի կարող գործարկվել, քանի որ զննարկիչը զբաղված է, այն կհերթագրվի և կկատարվի հենց որ զննարկիչը ազատ լինի:

Ստորև բերված պատկերը ցույց է տալիս, թե ինչ է տեղի ունենում ֆունկցիայի համար, որը երկար ժամանակ է պահանջում:

SetInterval-ի կողմից նախաձեռնված ֆունկցիայի կանչը ավելացվում է հերթին և տեղի է ունենում անմիջապես, երբ հնարավոր է.

Գործառույթի երկրորդ գործարկումը տեղի է ունենում առաջինի ավարտից անմիջապես հետո.

Կատարումը հերթագրվում է մեկից ավելի անգամ:

Եթե ​​ֆունկցիայի կատարման համար ավելի երկար տևում է, քան մի քանի պլանավորված կատարում, այն դեռ մեկ անգամ հերթագրվելու է: Այսպիսով, արձակումների «կուտակում» չկա։

Ստորև բերված պատկերում setInterval-ը փորձում է կատարել գործառույթը 200 մվ-ով և հերթագրել զանգը: 300ms և 400ms ժմչփը նորից արթնանում է, բայց ոչինչ չի լինում:

SetInterval (գործառույթ, հետաձգում) կանչելը չի ​​երաշխավորում իրական ուշացում կատարումների միջև:

Լինում են դեպքեր, երբ փաստացի ուշացումը նշվածից մեծ կամ փոքր է։ Ընդհանրապես, փաստ չէ, որ գոնե որոշակի ուշացում կլինի։

Այն դեպքերում, երբ անհրաժեշտ է ոչ միայն կանոնավոր կրկնություն, այլ գործարկումների միջև ուշացում, setTimeout-ն օգտագործվում է ամեն անգամ ֆունկցիան կատարելիս վերակայելու համար:

Ստորև բերված է մի օրինակ, որը ազդանշան է տալիս նրանց միջև 2 վայրկյան ընդմիջումներով:

var timer = setTimeout (function run () ( alarm (i++); timer = setTimeout (run, 2000); ), 2000);

Ժամաչափի նվազագույն ուշացում

Բրաուզերի ժամանակաչափն ունի ամենացածր հնարավոր հետաձգումը: Ժամանակակից բրաուզերներում այն ​​տատանվում է մոտավորապես զրոյից մինչև 4 մս: Ավելի հին մարդկանց մոտ այն կարող է ավելի երկար լինել և հասնել 15 մվ-ի:

Ստանդարտի համաձայն, նվազագույն ուշացումը 4 մս է: Այսպիսով, տարբերություն չկա setTimeout(..,1) և setTimeout(..,4) միջև:

Գործարկումը կարող է շատ ավելի քիչ հաճախակի լինել Որոշ դեպքերում ուշացումը կարող է լինել ոչ թե 4 մս, այլ 30 մվ կամ նույնիսկ 1000 մվ:

Բրաուզերների մեծ մասը (հիմնականում աշխատասեղանները) շարունակում են գործարկել setTimeout / setInterval, նույնիսկ եթե ներդիրն անգործուն է: Միևնույն ժամանակ, դրանցից մի քանիսը (Chrome, FF, IE10) նվազեցնում են ժմչփի նվազագույն հաճախականությունը մինչև 1 անգամ վայրկյանում։ Ստացվում է, որ ժամանակաչափը կաշխատի «ֆոնային» ներդիրում, բայց հազվադեպ:

Երբ աշխատում է մարտկոցով, նոութբուքի վրա, բրաուզերները կարող են նաև նվազեցնել կոդն ավելի քիչ հաճախակի գործարկելու հաճախականությունը և խնայել մարտկոցի էներգիան: IE-ն հատկապես հայտնի է դրանով։ Կրճատումը կարող է հասնել մի քանի անգամ՝ կախված պարամետրերից։ Եթե ​​պրոցեսորի ծանրաբեռնվածությունը չափազանց մեծ է, JavaScript-ը կարող է չկարողանալ ժամանակին մշակել ժամանակաչափերը: Սա բաց կթողնի setInterval-ի որոշ գործարկումներ:

Եզրակացություն. 4 մս հաճախականության վրա արժե կենտրոնանալ, բայց չպետք է հույս դնել դրա վրա:

Ինտերվալների դուրսբերում կոնսոլում Զանգերի միջև ժամանակային ընդմիջումները հաշվող կոդը մոտավորապես այսպիսի տեսք ունի.

Այս հնարքն արժանի է մտնելու JavaScript հաքերների տարեգրությունը։

Ֆունկցիան փաթաթված է setTimeout (func, 0), եթե ցանկանում եք այն գործարկել ընթացիկ սցենարի ավարտից հետո:

Բանն այն է, որ setTimeout-ը երբեք չի կատարում ֆունկցիան անմիջապես: Նա միայն ծրագրում է դրա իրականացումը։ Բայց JavaScript թարգմանիչը կսկսի կատարել պլանավորված գործառույթները միայն ընթացիկ սկրիպտը կատարելուց հետո:

Ստանդարտի համաձայն, setTimeout-ը, այնուամենայնիվ, չի կարող կատարել 0 ուշացումով ֆունկցիա, ինչպես ավելի վաղ ասացինք, ուշացումը սովորաբար կկազմի 4 ms: Բայց այստեղ գլխավորն այն է, որ կատարումը ցանկացած դեպքում տեղի կունենա ընթացիկ կոդի կատարումից հետո։

Օրինակ.

SetInterval (func, delay) և setTimeout (func, delay) մեթոդները թույլ են տալիս կանոնավոր կերպով գործարկել func-ը յուրաքանչյուր ուշացումով միլիվայրկյաններով մեկ անգամ:

Երկու մեթոդներն էլ վերադարձնում են ժամանակաչափի ID-ն: Այն օգտագործվում է կատարումը դադարեցնելու համար՝ զանգահարելով clearInterval/clearTimeout:

| | setInterval | setTimeout | || ----------- | ---------- | | Ժամկետ | Զանգը խիստ ժմչփի վրա է: Եթե ​​թարգմանիչը զբաղված է, մեկ զանգ հերթագրվում է: Ֆունկցիայի կատարման ժամանակը հաշվի չի առնվում, ուստի ժամանակային ընդմիջումը մի գործարկման ավարտից մինչև մյուսի սկիզբը կարող է տարբեր լինել: | setTimeout-ի ռեկուրսիվ զանգն օգտագործվում է setInterval-ի փոխարեն, որտեղ անհրաժեշտ է ֆիքսված դադար կատարումների միջև: | | Հետաձգում | Նվազագույն ուշացում՝ 4 ms: | Նվազագույն ուշացում՝ 4 ms: | | Բրաուզերի առանձնահատկությունները | Latency 0-ը չի աշխատում IE-ում | Opera-ում զրոյական հետաձգումը համարժեք է 4 մվ-ի, իսկ մյուս ուշացումները կարգավորվում են ճշգրիտ, ներառյալ ոչ ստանդարտ 1ms, 2ms և 3ms: |