Извор: http://learn.javascript.ru/settimeout-setinterval

Речиси сите JavaScript имплементации имаат внатрешен распоредувач кој ви овозможува да закажете функција која ќе се повика по одреден временски период.

Особено, оваа функција е поддржана во прелистувачите и во серверот Node.JS.

setTimeout

Синтакса:

var timerId = setTimeout(функ/код, доцнење[, arg1, arg2...])

Опции:

• функција/код
  • Функцијата или линијата на код што треба да се изврши.
  • Низата е поддржана за компатибилност и не се препорачува.
• одложување
  • Доцнење во милисекунди, 1000 милисекунди е еднакво на 1 секунда.
• arg1, arg2…
  • Аргументи за преминување на функцијата. Не е поддржано во IE9-.
  • Функцијата ќе се изврши по времето наведено во параметарот за одложување.

На пример, следниот код ќе повика аларм ("Здраво") по една секунда:

функција ()( alert("Здраво"); ) setTimeout(func, 1000);

Ако првиот аргумент е низа, тогаш толкувачот создава анонимна функција од таа низа.

Тоа е, таков запис функционира исто:

SetTimeout("alert("Здраво")", 1000);

Наместо тоа, користете анонимни функции:

SetTimeout ( функција ()( предупредување ("Здраво" ) ), 1000 );

Параметри и контекст на функцијата

Во сите модерни прелистувачи, имајќи го предвид IE10, setTimeout ви овозможува да ги наведете параметрите на функцијата.

Примерот подолу ќе излезе со „Здраво, јас сум Васија“ насекаде, освен IE9-:

функцијата sayHi(кој)( предупредување ("Здраво, јас сум " + кој); ) setTimeout(sayHi, 1000 , "Vasya" );

…Сепак, во повеќето случаи, ни треба поддршка за старата IE, и таа не ви дозволува да наведете аргументи. Затоа, за да ги поминат, тие го завиткуваат повикот во анонимна функција:

функцијата sayHi(кој)( предупредување ("Здраво, јас сум " + кој); ) setTimeout( функција ()( sayHi („Васија“) ), 1000);

Повикувањето преку setTimeout не го поминува овој контекст.

Особено, повикувањето на метод на објект преку setTimeout ќе работи во глобален контекст. Ова може да доведе до неточни резултати.

На пример, да го повикаме user.sayHi() по една секунда:

функција Корисник (ид) функција ()( alert(this .id);); ) var корисник = нов корисник (12345 ); setTimeout(user.sayHi, 1000); // се очекува 12345, но ќе печати „недефинирано“

Бидејќи setTimeout ќе ја извршува функцијата user.sayHi во глобален контекст, нема да има пристап до објектот преку ова.

Со други зборови, овие два повици setTimeout го прават истото:

// (1) една линија setTimeout(user.sayHi, 1000); // (2) исто во два реда var func = user.sayHi; setTimeout(func, 1000);

За среќа, овој проблем исто така лесно се решава со создавање на средна функција:

функција Корисник (ид)(ова .id = id; ова .sayHi = функција ()( alert(this .id);); ) var корисник = нов корисник (12345 ); setTimeout ( функција ()( user.sayHi (); ), 1000 );

Функцијата обвивка се користи за пренесување на аргументи преку прелистувачот и зачувување на контекстот на извршување.

Откажете ја изведбата

Функцијата setTimeout враќа timerId што може да се користи за откажување на дејството.

Синтакса:

ClearTimeout (тајмерИд)

Во следниот пример, поставивме тајмаут и потоа бришеме (се предомислуваме). Како резултат на тоа, ништо не се случува.

var timerId = setTimeout( функција ()( аларм (1 ) ), 1000 ); clearTimeout(timerId);

setInterval

Методот setInterval има синтакса слична на setTimeout.

var timerId = setInterval(функција/код, доцнење[, arg1, arg2...])

Значењето на аргументите е исто. Но, за разлика од setTimeout, тој не ја извршува функцијата еднаш, туку редовно ја повторува по одреден временски интервал. Можете да го запрете извршувањето со повик:

ClearInterval (TimerId)

Следниот пример, кога ќе се изврши, ќе прикажува порака на секои две секунди додека не кликнете на копчето Стоп:

<тип на влез "копче" на клик ="clearInterval(тајмер)" вредност ="(!LANG:Стоп" > !} <скрипта > var i = 1; var тајмер = setInterval( функција ()( аларм (i++) ), 2000 );скрипта >

Редење и редење повици во setInterval

Повикувањето setInterval (функција, одложување) ја поставува функцијата да се извршува по наведениот временски интервал. Но, тука има една суптилност.

Всушност, паузата помеѓу повиците е помала од наведениот интервал.

На пример, да го земеме setInterval(function() ( func(i++) ), 100) . Таа извршува функција на секои 100 ms, зголемувајќи го бројачот секој пат.

На сликата подолу, црвениот блок е времето на извршување на func. Времето помеѓу блоковите е времето помеѓу извршувањето на функцијата и е помало од поставеното доцнење!

Односно, прелистувачот го иницира извршувањето на функцијата точно на секои 100ms, без да го земе предвид времето на извршување на самата функција.

Се случува извршувањето на функцијата да одземе повеќе време отколку доцнењето. На пример, функцијата е сложена, а доцнењето е кратко. Или, пак, функцијата содржи предупредувања/потврди/промптни изјави кои го блокираат текот на извршувањето. Во овој случај започнуваат интересни работи.

Ако функцијата не може да се активира затоа што прелистувачот е зафатен, таа се става во ред и ќе се изврши веднаш штом прелистувачот е слободен.

Сликата подолу илустрира што се случува со функцијата за која е потребно долго време да се изврши.

Повик на функција активиран од setInterval се додава во редот и веднаш се вклучува кога е можно:

Второто извршување на функцијата се случува веднаш по завршувањето на првото:

Извршувањето не се чека на ред повеќе од еднаш.

Ако извршувањето на функцијата трае подолго од неколку закажани извршувања, тогаш таа сепак ќе биде во ред еднаш. Значи нема „акумулација“ на лансирања.

На сликата подолу, setInterval се обидува да ја изврши функцијата за 200 ms и го поставува повикот во редици. На 300 ms и 400 ms, тајмерот повторно се буди, но ништо не се случува.

Повикувањето setInterval (функција, доцнење) не гарантира вистинско доцнење помеѓу извршувањето.

Има моменти кога вистинското доцнење е поголемо или помало од наведеното. Генерално, не е факт дека ќе има барем некакво доцнење.

Повторете го вгнезденото поставувањеTimeout

Во случаи кога не ви треба само редовно повторување, туку задолжително одложување помеѓу лансирањето, користете повторна инсталација setTimeout секогаш кога ќе се изврши функцијата.

Подолу е пример кој издава предупредување со интервали од 2 секунди меѓу нив.

<тип на влез "копче" на клик ="clearTimeout(тајмер)" вредност ="(!LANG:Стоп" > !} <скрипта > var i = 1; var тајмер = setTimeout ( функцијата run()( аларм(i++); тајмер = setTimeout(run, 2000); ), 2000);скрипта >

Ќе има фиксни доцнења помеѓу извршувањето на временската линија за извршување. Илустрација за доцнење од 100 ms:

Минимално доцнење на тајмерот

Тајмерот на прелистувачот има најмало можно доцнење. Тоа варира од околу нула до 4ms во современите прелистувачи. Кај постарите, може да биде поголем и да достигне 15 ms.

Стандардно, минималното доцнење е 4 ms. Значи, нема разлика помеѓу setTimeout(..,1) и setTimeout(..,4).

Постојат однесувања специфични за прелистувачот во setTimeout и setInterval со нула доцнење.

1. Во Opera, setTimeout(.., 0) е исто како setTimeout(.., 4). Се извршува поретко од setTimeout(..,2). Ова е карактеристика на овој прелистувач.
2. AT Internet Explorer, нула одложување setInterval(.., 0) нема да работи. Ова се однесува конкретно за setInterval, т.е. setTimeout (.., 0) работи добро.

Вистинската работна фреквенција

Операцијата може да биде многу поретка.Во некои случаи, доцнењето може да не биде 4ms, туку 30ms или дури 1000ms.

Повеќето прелистувачи (на прво место на работната површина) продолжуваат да извршуваат setTimeout / setInterval дури и ако јазичето е неактивно. Во исто време, голем број од нив (Chrome, FF, IE10) ја намалуваат минималната фреквенција на тајмерот, до 1 пат во секунда. Излегува дека тајмерот ќе пука во табулаторот „позадина“, но ретко.

Кога работи на батерија, во лаптоп, прелистувачите исто така може да го забават за поретко извршување на кодот и заштеда на енергија од батеријата. IE е особено познат по ова. Намалувањето може да достигне неколку пати, во зависност од поставките. Ако оптоварувањето на процесорот е превисоко, JavaScript можеби нема да може да ги обработи тајмерите навреме. Ова ќе прескокне некои работи на setInterval.

Заклучок: вреди да се фокусирате на фреквенција од 4ms, но не треба да сметате на тоа.

Издавање интервали во конзолата Кодот што ги брои временските интервали помеѓу повиците изгледа отприлика вака:

var timeMark = нов Датум ; setTimeout ( функција оди ()( var diff = нов Date - timeMark; // отпечатете го следното одложување на конзолата наместо на страницатаконзола .log(diff); // запомнете го времето на самиот крај, // за мерење на доцнењето точно помеѓу повиците timeMark = нов Датум ; setTimeout (оди, 100); ), 100);

setTimeout(func, 0) трик

Овој трик заслужува влез во аналите на хакерите на JavaScript.

Функцијата е завиткана во setTimeout(func, 0) доколку сакаат да ја извршат по завршувањето на тековната скрипта.

Поентата е дека setTimeout никогаш не ја извршува функцијата веднаш. Тој само планира да го спроведе. Но, преведувачот JavaScript ќе започне со извршување на закажаните функции само по извршувањето на тековната скрипта.

Стандардно, setTimeout и онака не може да изврши функција со задоцнување од 0. Како што рековме претходно, доцнењето е типично 4ms. Но, главната работа овде е дека извршувањето во секој случај ќе биде по извршувањето на тековниот код.

На пример:

varresult; функција showResult()( аларм (резултат); ) setTimeout (покажи Резултат, 0); резултат = 2 *2; // отпечатоци 4

Вкупно

Методите setInterval(func, delay) и setTimeout(func, delay) овозможуваат функцијата да работи редовно/еднаш на секои одложување милисекунди.

Двата методи го враќаат ID на тајмерот. Се користи за запирање на извршувањето со повикување clearInterval/clearTimeout.

| | сетинтервал | setTimeout | || ----------- | ---------- | | Тајминг | Има повик строго на тајмерот. Ако преведувачот е зафатен, се чека еден повик. Времето на извршување на функцијата не се зема предвид, така што временскиот интервал од крајот на едно извршување до почетокот на друго може да биде различен. | Рекурзивниот повик до setTimeout се користи наместо setInterval каде што е потребна фиксна пауза помеѓу извршувањето. | | Одложување | Минимално доцнење: 4 ms. | Минимално доцнење: 4 ms. | | Карактеристики на прелистувачот | Доцнењето 0 не работи во IE. | Во Opera, нула доцнење е еквивалентно на 4ms, другите доцнења се постапуваат точно, вклучувајќи ги нестандардните 1ms, 2ms и 3ms. |

Во програмирањето на јазиците за скриптирање, одвреме-навреме се јавува потреба да се направи пауза - да се прекине извршувањето на програмата на одредено време, а потоа да се продолжи со работа. На пример, во 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. i = 1;
2. одложи додавањето на бројот „1“ во полето за внесување за 0,9 секунди;
3. веднашпо поставувањето на оваа задача, циклусот оди понатаму: i=2;
4. го одложи додавањето на бројот „2“ во полето за внесување за 0,9 секунди;

Веднашзначи, на пример, 1 ms (односно, непропорционално мала во споредба со 900 ms): јамката ќе ја изврши својата работа речиси веднаш, создавајќи неколку задачи што чекаат од истиот временски период. Ова значи дека сите нерешени задачи за „цртање“ ќе бидат завршени речиси во исто време, без паузи помеѓу додавањето нови броеви. Циклусот започнува; сè замрзнува 0,9 секунди; и shirrr - сите броеви се снимаат по ред еден по друг.

Како би го примениле во таков случај? setTimeout? Комплицирано е. Треба да ја повикате функцијата рекурзивно(од внатрешноста на функцијата истата функција), и за овој процес да не биде бесконечен, поставете услов за стопирање (на пример, вредноста на отпечатениот број):

Функција welltest() (ако (т.е< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }

И уште една променлива јастреба да го иницијализирате надвор од функцијата - на пример, вака:

Сега сè работи како што треба (го намаливме времето на доцнење од 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) )

Карактеристика на методот Javascipt setIntervalсо тоа што не поминува „само по себе“, мора да се запре со посебен метод clearInterval. И за да биде јасно што точно да се запре, специјален идентификатор е доделен на задачата за одложеното дејство - тајмер: window.timer1 = window.setInterval(...) .

Идентификаторите може да се доделат и на задачите создадени со методот setTimeout. Сите ID на тајмер мора да се разликуваат еден од друг (да бидат единствени во тековниот прозорец на прелистувачот). Потоа можете да креирате неколку различни задачи во прозорецот што користат дејства што чекаат, а овие задачи ќе се извршуваат паралелно (како во исто време, ако компјутерот има доволно ресурси), што во основа е невозможно во PHP или VBS.

Еве една страница за пример со повеќекратни Javascript тајмери ​​кои работат во исто време: setinterval.htm (функции на Javascript во setinterval.js). Сите тајмери ​​на страници (освен менијата) може да се запрат со копчето Esc. Сите тајмери ​​за примери се потпираат на „природно“ (наместо апстрактно) јас++) броење - време или растојание. Сите „часовници“ се специјално несинхронизирани (за јасност). Тајмерите зависни од растојанието се користат во „индикатор“ и во паѓачкото мени („возење“).

Опаѓачкото мени

Нашето мени за извлекување е навистина извлекување (од под „заглавјето“): се оставаат празнини помеѓу елементите за да се види како се лизга надвор. Неочекувано, се покажа дека не можеме да направиме подеднакво непречено излегување за списоци со различни должини - веројатно поради ниските перформанси на компјутерот (AMD Athlon 999 MHz).

Сосема е очигледно дека за убавина и хармонија е неопходно списоците со различни ставки од менито да испаднат во исто време. Односно, подолгите листи треба да испаднат со повеќе голема брзина, пократки - со помала брзина. Се чини дека ова може да се направи вака:

1. Го поставивме вкупното време на „поаѓање“, на пример, на 200 ms.
2. Ако паѓачката листа е висока 20 пиксели, очигледно можеме да ја поместиме за еден пиксел надолу на интервал од 10 ms, а потоа целата листа ќе се појави за 200 ms.
3. Ако паѓачкото мени е високо 40 px, за да се вклопи во исто време, мора да го поместуваме за еден пиксел надолу на секои 5 ms.

Според оваа логика, ако паѓачкото мени има висина од 200 пиксели, треба да го поместиме надолу за еден пиксел на 1ms. Но, таквата брзина не работи на нашиот компјутер - прелистувачот едноставно нема време да нацрта нова позиција на списокот за една милисекунда. Да. Javascript има време за броење (што има за броење?), Но прелистувачот (Firefox) нема време за прикажување. Типична веб ситуација.

Затоа, можно е повеќе или помалку да се изедначи времето на поаѓање од менито само со помош на патерици, а сè уште не е јасно како тоа ќе функционира за повеќе брз компјутер. Но, мора да сметаме на најбавниот, нели? Алгоритмот (без да се земе предвид брзината на компјутерот) излегува дека е нешто вака:

1. Поставете го вкупното време за напуштање на списокот: време = 224 (ms).
2. Поставете го минималното време за еден интервал во циклусот: доцнење = 3 (ms).
3. Поставете го минималниот чекор за движење на списокот: поместување = 1 (px).
4. Сето ова го менуваме во зависност од висината на списокот: 1) го зголемуваме времето на задоцнување (интервал) обратно пропорционално на висината и директно пропорционално на вкупното време (на висина од 224, коефициентот е 1); 2) ако висината е поголема од 40 px, зголемете го минималниот чекор пропорционално на висината. Константата „40“ е добиена емпириски за најбавниот компјутер. Тестовите на компјутерот Pentium 4 CPU 2,53 GHz открија потполно иста бројка - 40. Инаку, тајмерите дивеат, списоците излегуваат од чекор.

Сега списоците горе-долу си заминуваат. Повеќе или помалку исто толку време. На страницата 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)), доцнење)

Па, пред да трчате, само пресметајте ги сите овие макстоп и офсет, а исто така ставете ја листата во позиција на минтоп. Што прави „прелиминарната“ функција? слајд () 40 линии во големина. И сите заедно - во датотеката setinterval.js . Да, и оваа глупост нема да работи без вклучен лист за стилови.

Истекот на JavaScript е природна функција на JavaScript која извршува дел од кодот по одредено временско одложување (во милисекунди). Ова може да ви помогне кога сакате да прикажете скокачки прозорец откако корисникот ќе помине одредено време на вашата страница. Или сакате ефектот кога лебдите над елементот да работи само по некое време. На овој начин, можете да избегнете ненамерно активирање на ефектот ако корисникот случајно лебдел над него.

Едноставен пример за setTimeout

За да покажеме како функционира оваа функција, да го погледнеме следното демо, во кое се појавува скокачки прозорец две секунди по кликнувањето на копчето.

Прикажи демо

Синтакса

Документацијата MDN ја дава следната синтакса за setTimeout:

var timeoutID = window.setTimeout(func, ); var timeoutID = window.setTimeout(код, );

• timeoutID е нумерички id што може да се користи заедно со clearTimeout() за да се оневозможи тајмерот;
• func е функцијата што треба да се изврши;
• код( во алтернативна синтакса) е линијата на кодот што треба да се изврши;
• доцнење – времетраење на доцнењето во милисекунди по кое функцијата ќе се активира. Стандардната вредност е 0.

setTimeout наспроти прозорец.setTimeout

Горенаведената синтакса користи window.setTimeout . Зошто?

Всушност, setTimeout и window.setTimeout се речиси иста функција. Единствената разлика е во тоа што во вториот израз, го користиме методот setTimeout како својство на објектот на глобалниот прозорец.

Лично, мислам дека ова само во голема мера го комплицира кодот. Кога би дефинирале алтернатива JavaScript методтајмаутот што може да се најде и да се врати по приоритетен редослед ќе наиде на уште повеќе проблеми.

Не сакам да се плеткам со објектот на прозорецот во ова упатство, но генерално зависи од вас која синтакса да ја користите.

Примери за користење

Ова може да биде име на функција:

функција експлодира () ( предупредување ("Бум!"); ) setTimeout (експлодира, 2000);

Променлива која се однесува на функција:

var explode = функција () ( предупредување ("Бум!"); ); setTimeout (експлодира, 2000);

Или анонимна функција:

setTimeout(function()( alert ("Boom!"); ), 2000);

• Таквиот код е слабо перципиран и, според тоа, ќе биде тешко да се модернизира или дебагира;
• Тоа вклучува употреба на методот eval(), кој може да биде потенцијална ранливост;
• Овој метод е побавен од другите затоа што треба да работи JavaScript преведувач.

Исто така, имајте предвид дека го користиме методот за предупредување за истекот на JavaScript за да го тестираме кодот.

Предавање параметри на setTimout

Во првиот ( Исто така, вкрстен прелистувач) опција, ги пренесуваме параметрите на функцијата за повратен повик извршена со setTimeout .

Во следниот пример, извлекуваме случаен поздрав од низата со честитки и го пренесуваме како параметар на функцијата greet(), која се извршува од setTimeout со задоцнување од 1 секунда:

функција greet(поздрав)( console.log(поздрав); ) функција getRandom(arr)( return arr; ) var greetings = ["Здраво", "Bonjour", "Guten Tag"], randomGreeting = getRandom(поздрав); setTimeout(function()( greet(randomGreeting); ), 1000);

Прикажи демо

Алтернативен метод

Во синтаксата на почетокот на овој напис, постои уште еден метод што може да се користи за да се пренесат параметрите на функцијата за повратен повик извршена со истекот на JavaScript. Овој методимплицира излез на сите параметри по доцнењето.

Врз основа на претходниот пример, добиваме:

setTimeout (поздрав, 1000, случаен поздрав);

Овој метод нема да работи во IE 9 и подолу, каде што поминатите параметри се третираат како недефинирани. Но, за да се реши овој проблем, MDN има специјален полифил.

Поврзани прашања и „ова“

Кодот извршен од setTimeout работи одделно од функцијата што го повика. Поради ова, се соочуваме со одредени проблеми, како решение за кое можеме да ги искористиме клучен зборова.

var лице = ( firstName: "Џим", воведи: function()( console.log("Здраво, јас"м " + this.firstName); ) ); person.introduce(); // Излези: Здраво, јас" m Jim setTimeout(person.introduce, 50); // Излези: Здраво, јас сум недефиниран

Причината за овој излез е што во првиот пример, ова укажува на објектот person, додека во вториот пример покажува на објектот на глобалниот прозорец, кој нема својство firstName.

За да се ослободите од оваа недоследност, можете да користите неколку методи:

Присилете ја вредноста на ова

Ова може да се направи со користење на bind(), метод кој создава нова функција која, кога ќе се повика, користи одредена вредност како вредност на овој клуч. Во нашиот случај, наведеното лице приговара. Ова ни дава како резултат:

setTimeout(person.introduce.bind(лице), 50);

Забелешка: методот на врзување беше воведен во ECMAScript 5, што значи дека ќе работи само во современи прелистувачи. Во други, ќе добиете грешка за време на траење кога ја применувате. JavaScript „грешка на истекот на функцијата“.

Користете библиотека

Многу библиотеки вклучуваат вградени функции потребни за решавање на овој проблем. На пример, методот jQuery.proxy(). Зазема функција и враќа нова која секогаш ќе користи одреден контекст. Во нашиот случај, контекстот ќе биде:

setTimeout($.proxy(person.introduce, person), 50);

Прикажи демо

Исклучете го тајмерот

Повратната вредност на setTimeout е нумеричка идентификација што може да се користи за оневозможување на тајмерот користејќи ја функцијата clearTimeout():

var тајмер = setTimeout (myFunction, 3000); clearTimeout (тајмер);

Ајде да го видиме на дело. Во следниот пример, ако кликнете на " започнете одбројување“, ќе започне одбројувањето. Откако ќе заврши, мачињата ќе го добијат своето. Но, ако го притиснете копчето Запрете го одбројувањето”, истекувањето на JavaScript ќе се прекине и ќе се ресетира.

Види пример

Сумирање

setTimeout е асинхрона функција, што значи дека примениот повик до оваа функција влегува во редот и ќе се изврши само откако ќе се завршат сите други дејства на стекот. Не може да работи истовремено со други функции или на посебна нишка.

• Од:
• Регистриран: 2014.07.08
• Објави: 3,896
• Допаѓања: 497

Тема: SetTimeOut и SetInterval, што е подобро да се користи во JavaScript?

За постојано извршување на кодот во редовни интервали, функцијата setInterval. Сепак, има голем број на недостатоци, главно ова е различно однесување во различни прелистувачи.

Првата разлика е разликата во дотерувањето на тајмерот за следното возење. Ајде да создадеме мал тест: ќе го измериме времето што поминало од почетокот на претходното возење и од неговиот крај.

var d1 = нов Датум(), d2 = нов Датум(); setInterval(function() ( var d = new Date(); document.body.innerHTML += (d - d1) + " " + (d - d2) + "
"; // Ставете ознака на почетокот на функцијата d1 = new Date(); додека (new Date() - d1< 200); // ничего не делаем 200 миллисекунд // И в конце функции d2 = new Date(); }, 1000);

Излезот ќе биде информативен почнувајќи од втората линија.

Во Firefox, Opera, Safari и Chrome, ситуацијата ќе биде слична: првиот број ќе биде приближно еднаков на 1000, вториот - 200 помалку. Разликата ќе биде само во ширењето на вредностите. Најмалото ширење во Chrome и Opera.

2 Одговори од PunBB (уреди од PunBB 2017.06.08 16:45)

• Од: Москва, Совхознај 3, ап. 98
• Регистриран: 2014.07.08
• Објави: 3,896
• Допаѓања: 497

Друга разлика, помалку забележлива и потешка за репродукција, но понекогаш способна да предизвика многу проблеми, е отпорноста на промените во времето на системот. Ако го извршите следниов тест

setInterval(function() ( document.body.innerHTML = Math.random(); ), 500);

И откако ќе започнете, преведете го системското време пред една минута, а потоа внатре Прелистувачи на Firefoxи Safari ќе престане да ги менува броевите и по една минута ќе започне повторно. Се разбира, рачното преведување на времето на системот е исклучително ретка ситуација, но многу системи се конфигурирани автоматски да го синхронизираат времето со серверите на Интернет, така што во некои ситуации овој фактор не може да се намали.

Друг мал минус на функцијата setInterval е тоа што за да можете да го запрете неговото дејство, треба некаде да го запомните неговиот идентификатор, што не е секогаш погодно.

3 Одговори од PunBB

• Од: Москва, Совхознај 3, ап. 98
• Регистриран: 2014.07.08
• Објави: 3,896
• Допаѓања: 497

Одг: SetTimeOut и SetInterval, што е подобро да се користи во JavaScript?

За да се ослободите од наведените недостатоци на setInterval, можете да користите повеќекратно setTimeout.

Важна алтернатива на setInterval е рекурзивниот setTimeout:

/** наместо: var timerId = setInterval(function() ( alert("штиклирајте"); ), 2000); */ var timerId = setTimeout (функција tick() ( alert ("штиклирајте"); timerId = setTimeout (штиклирајте, 2000); ), 2000);

Во горната шифра, следното извршување е закажано веднаш по завршувањето на претходното.

Рекурзивниот setTimeout е пофлексибилен тајминг метод од setInterval, бидејќи времето до следното извршување може да се закаже поинаку, во зависност од резултатите од тековното.

На пример, имаме услуга која го анкетира серверот на секои 5 секунди за нови податоци. Ако серверот е преоптоварен, можете да го зголемите интервалот на гласање на 10, 20, 60 секунди ... И потоа вратете го кога сè ќе се врати во нормала.

Ако редовно извршуваме задачи за вчитување на процесорот, тогаш можеме да го процениме времето поминато на нивното извршување и да го планираме следното лансирање порано или подоцна.

4 Одговори од PunBB

• Од: Москва, Совхознај 3, ап. 98
• Регистриран: 2014.07.08
• Објави: 3,896
• Допаѓања: 497

Одг: SetTimeOut и SetInterval, што е подобро да се користи во JavaScript?

Рекурзивниот setTimeout гарантира пауза помеѓу повиците, а setInterval не.

Ајде да споредиме два кодови. Првиот користи setInterval:

var i = 1; setInterval(function() ( func(i); ), 100);

Вториот користи рекурзивен setTimeout:

var i = 1; setTimeout(функција run() ( func(i); setTimeout(run, 100); ), 100);

Со setInterval, внатрешниот тајмер ќе се активира точно на секои 100 ms и ќе го повика func(i):

Вистинската пауза помеѓу функциските повици со setInterval е помала од наведената во кодот!

Ова е природно, бидејќи времето на работа на функцијата на кој било начин не се зема предвид, таа „јаде“ дел од интервалот.

Исто така, можно е функцијата да биде посложена отколку што очекувавме и да трае подолго од 100 ms.

Во овој случај, преведувачот ќе чека да заврши функцијата, потоа ќе го провери тајмерот и, ако времето за повикување setInterval веќе е дојдено (или поминало), тогаш следниот повик ќе се случи веднаш.

Ако функцијата се извршува подолго од паузата setInterval, тогаш повиците ќе се случат без никаков прекин.

5 Одговори од семпаи

• Од: Ерусалим
• Регистриран: 2015.06.02
• Објави: 958
• Допаѓања: 274

Одг: SetTimeOut и SetInterval, што е подобро да се користи во JavaScript?

Сè зависи од задачата што е на располагање. Првично, SetTimeOut се користи за да го стартува тајмерот еднаш, а SetInterval се користи за стартување на циклусот. Но, и двете функции може да се користат за вртење низ скриптите, ако, на пример, се извршува рекурзивно во функцијата SetTimeOut, тогаш таа ќе дејствува практично слично како SetInterval.

Минусот на SetInterval во моментот е тоа што не го зема предвид времето на извршување на самата скрипта (функција), и ако, на пример, го користите за тешки барања, тогаш времето на интервал ќе биде значително намалено, а може да се разликуваат во различни прелистувачи.

Но, повторно, ако функцијата или барањето се минимизираат, тогаш крајниот корисник веројатно нема да ја почувствува разликата.
Затоа, што да се користи, секој одлучува за себе.