• Кімнен:
• Тіркелген: 2014.07.08
• Хабарламалар: 3,896
• Ұнатады: 497

Тақырып: SetTimeOut және SetInterval, JavaScript-те қайсысын қолданған дұрыс?

Кодты тұрақты аралықпен қайталап іске қосу үшін функция SetInterval. Дегенмен, оның бірқатар кемшіліктері бар, негізінен бұл басқа мінез-құлық әртүрлі браузерлер.

Бірінші айырмашылық - келесі іске қосу үшін таймер параметріндегі айырмашылық. Кішігірім сынақты жасайық: біз алдыңғы жүгірістің басынан бастап және оның аяғынан бастап өткен уақытты өлшейміз.

var d1 = new Date(), d2 = new Date(); setInterval(функция() ( var d = жаңа Күн(); document.body.innerHTML += (d - d1) + " " + (d - d2) + "
"; // функциясының басына белгіні қойыңыз d1 = new Date(); while (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

Re: 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

Re: SetTimeOut және SetInterval, JavaScript-те қайсысын қолданған дұрыс?

Рекурсивті setTimeout қоңыраулар арасындағы үзіліске кепілдік береді, ал setInterval емес.

Екі кодты салыстырайық. Біріншісі setInterval пайдаланады:

var i = 1; setInterval(функция() ( func(i); ), 100);

Екіншісі рекурсивті setTimeout пайдаланады:

var i = 1; setTimeout(функцияны іске қосу() ( func(i); setTimeout(іске қосу, 100); ), 100);

setInterval көмегімен ішкі таймер 100 мс сайын іске қосылады және func(i) шақырады:

setInterval көмегімен функция шақырулары арасындағы нақты үзіліс кодта көрсетілгеннен аз!

Бұл табиғи нәрсе, өйткені функцияның жұмыс уақыты қандай да бір түрде ескерілмейді, ол интервалдың бір бөлігін «жейді».

Сондай-ақ, функция біз күткеннен күрделірек болуы және 100 мс-тен көп уақыт алуы мүмкін.

Бұл жағдайда аудармашы функцияның аяқталуын күтеді, содан кейін таймерді тексереді және егер setInterval шақыру уақыты әлдеқашан келіп (немесе өтіп кеткен) болса, келесі шақыру дереу орындалады.

Функция setInterval үзілісінен ұзағырақ орындалса, шақырулар мүлдем үзіліссіз орындалады.

5 Жауап беру семпай

• Кімнен: Иерусалим
• Тіркелген: 2015.06.02
• Хабарламалар: 958
• Ұнатады: 274

Re: SetTimeOut және SetInterval, JavaScript-те қайсысын қолданған дұрыс?

Барлығы тапсырмаға байланысты. Бастапқыда SetTimeOut таймерді бір рет іске қосу үшін, ал циклды бастау үшін SetInterval пайдаланылады. Бірақ екі функцияны сценарийлер бойынша айналдыру үшін пайдалануға болады, мысалы, SetTimeOut функциясында рекурсивті іске қосылса, ол SetInterval функциясына іс жүзінде ұқсас әрекет етеді.

Қазіргі уақытта SetInterval минусы, ол сценарийдің (функцияның) өзін орындау уақытын есепке алмайды және, мысалы, сіз оны ауыр сұраулар үшін пайдалансаңыз, онда интервал уақыты айтарлықтай қысқарады және ол әртүрлі браузерлерде әртүрлі болуы мүмкін.

Бірақ тағы да, егер функция немесе сұрау азайтылса, соңғы пайдаланушы айырмашылықты сезінуі екіталай.
Сондықтан, нені пайдалану керек, әркім өзі шешеді.

The setInterval()Терезе және Жұмысшы интерфейстерінде ұсынылған әдіс функцияны қайта-қайта шақырады немесе әрбір шақыру арасында белгіленген уақыт кідірісімен код үзіндісін орындайды.Ол интервалды бірегей түрде анықтайтын интервал идентификаторын қайтарады, сондықтан оны кейін clearInterval() шақыру арқылы жоюға болады. Бұл әдіс WindowOrWorkerGlobalScope миксімен анықталады.

Синтаксис

Параметрлер

Ескерту: Бірінші синтаксистегі setInterval() параметріне қосымша аргументтерді беру болмайдыжұмыс істеу Internet Explorer 9 және одан бұрын. Осы браузерде бұл функцияны қосқыңыз келсе, политолтырғышты пайдалануыңыз керек (бөлімді қараңыз).

қайтаратын мән

Қайтарылған интервал идентификаторы - setInterval() шақыруымен жасалған таймерді анықтайтын сандық, нөлден басқа мән; бұл мәнді күту уақытын болдырмау үшін беруге болады.

setInterval() және setTimeout() бірдей идентификаторлар пулын бөлісетінін және clearInterval() мен clearTimeout() техникалық түрде бір-бірінің орнына қолданылуы мүмкін екенін білу пайдалы болуы мүмкін. Дегенмен, түсінікті болу үшін кодты сақтау кезінде шатастырмау үшін оларды әрқашан сәйкестендіруге тырысу керек.

Ескерту: Кідіріс аргументі таңбаланған 32 биттік бүтін санға түрлендіріледі. Бұл кідірісті 2147483647 мс дейін шектейді, себебі ол IDL ішінде қол қойылған бүтін сан ретінде көрсетілген.

Мысалдар

1-мысал: Негізгі синтаксис

Келесі мысал setInterval() "с негізгі синтаксисін көрсетеді.

Var intervalID = window.setInterval(myCallback, 500, "1-параметр", "2-параметр"); функциясы myCallback(a, b) ( // Мұнда сіздің кодыңыз // Параметрлер тек міндетті емес. console.log(a); console.log(b); )

2-мысал: Екі түсті ауыстыру

Келесі мысал Flashtext() функциясын Тоқтату түймесі басылғанша секундына бір рет шақырады.

3-мысал: Жазу машинкасын модельдеу

Келесі мысал селекторлардың көрсетілген тобына сәйкес келетін Түйін тізіміне мазмұнды алдымен тазалау, содан кейін баяу теру арқылы жазу машинкасын имитациялайды.

CopyLeft 2012 Mozilla Developer Network

[ ойнау | Кідірту | Аяқтау ]

JavaScript жазу машинкасы

кері шақыру аргументтері

Бұрын талқыланғандай, Internet Explorer 9 және одан төмен нұсқалары setTimeout() немесе setInterval() ішінде кері шақыру функциясына аргументтерді жіберуді қолдамайды. Келесісі IE-арнайыкод осы шектеуді еңсеру әдісін көрсетеді. Қолдану үшін сценарийдің жоғарғы жағына келесі кодты қосыңыз.

Тағы бір мүмкіндік - кері қоңырау шалу үшін анонимді функцияны пайдалану, бірақ бұл шешім біршама қымбатырақ. Мысалы:

Var intervalID = setInterval(function() ( myFunc("бір", "екі", "үш"); ), 1000); var intervalID = setInterval(функция(arg1) ().bind(анықталмаған, 10), 1000);

Белсенді емес қойындылар

Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) бастап, белсенді емес қойындылардағы аралықтар секундына бір реттен жиі емес жану үшін қысылады.

«Бұл» мәселе

Әдісті setInterval() немесе кез келген басқа функцияға бергенде, ол қате осы мәнмен шақырылады. Бұл мәселе JavaScript анықтамасында егжей-тегжейлі түсіндіріледі.

Түсіндіру

setInterval() арқылы орындалатын код өзі шақырылған функциядан бөлек орындау контекстінде іске қосылады. Нәтижесінде, шақырылатын функция үшін this кілт сөзі терезе (немесе жаһандық) нысанына орнатылады, ол setTimeout деп аталатын функция үшін осы мәнмен бірдей емес. Келесі мысалды қараңыз ( setInterval() орнына setTimeout() пайдаланады – мәселе шын мәнінде екі таймер үшін де бірдей):

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: WrappedNative нысанындағы заңсыз әрекет" 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 және т. () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay); ); window.setInterval = функциясы (vCallback, nDelay /*, argumentToPass1, argumentToPass2, т.б. */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback данасы функциясы? () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay); );

Бұл екі ауыстыру сонымен қатар IE ішіндегі таймерлердің кері шақыру функцияларына ерікті аргументтердің HTML5 стандартты өтуін қосады. Сондықтан оларды ретінде пайдалануға болады стандартқа сәйкес емесполитолтырлар да. үшін қараңыз стандартқа сәйкесполитолтыру.

Жаңа мүмкіндік сынағы:

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 Demons Management бөлімін қараңыз. Бұл неғұрлым күрделі нұсқа - бұл әдістердің үлкен және масштабталатын жиынтығы Демонконструктор. Дегенмен, Демонконструктордың өзі клоннан басқа ештеңе емес MiniDaemonүшін қосымша қолдауымен ішіндежәне бастаужасау кезінде жарияланған функциялар демон . Сонымен MiniDaemon Framework қарапайым анимациялар үшін ұсынылған әдіс болып қала береді, өйткені Демононың әдістерінсіз оның клоны болып табылады.

minidaemon.js

MiniDaemon аргументтерді кері шақыру функциясына жібереді. Егер сіз онымен осы мүмкіндікті қолдамайтын браузерлермен жұмыс істегіңіз келсе, жоғарыда ұсынылған әдістердің бірін пайдаланыңыз.

Синтаксис

var myDaemon = жаңа MiniDaemon( thisObject, қайта телефон соғу[ , мөлшерлемесі [, ұзындығы]]);

Сипаттама

Қолдану жазбалары

setInterval() функциясы әдетте анимациялар сияқты қайта-қайта орындалатын функциялар үшін кешіктіруді орнату үшін пайдаланылады. WindowOrWorkerGlobalScope.clearInterval() арқылы аралықты жоюға болады.

Функцияңызды шақырғыңыз келсе бір реткөрсетілген кешіктіруден кейін пайдаланыңыз.

Кешіктіру шектеулері

Бұл интервалдар кірістірілген болуы мүмкін; яғни, setInterval() үшін кері шақыру, біріншісі әлі жалғасып жатса да, басқа аралықты іске қосу үшін setInterval() функциясына қоңырау шалуы мүмкін. Мұның ықтимал әсерін азайту үшін өнімділігі, интервалдар бес деңгейден жоғары тереңдікте кірістірілгенде, браузер автоматты түрде интервал үшін 4 мс ең аз мәнді енгізеді.

Браузерлер кейбір жағдайларда интервал үшін одан да қатаң минималды мәндерді қолдануы мүмкін, бірақ олар жалпы болмауы керек. Сондай-ақ, кері қоңырауға қоңыраулар арасында өтетін нақты уақыт мөлшері берілген кешіктіруден ұзағырақ болуы мүмкін екенін ескеріңіз; Мысалдар үшін WindowOrWorkerGlobalScope.setTimeout() ішінде көрсетілгеннен ұзағырақ кідірістердің себептерін қараңыз.

Орындау ұзақтығы интервал жиілігінен қысқа болуын қамтамасыз етіңіз

Логиканың орындалуы интервал уақытынан ұзағырақ болуы мүмкін болса, setTimeout() арқылы аталған функцияны рекурсивті шақыру ұсынылады. Мысалы, қашықтағы серверді әр 5 секунд сайын сұрау үшін setInterval() функциясын пайдалансаңыз, желінің кешігуі, жауап бермейтін сервер және басқа да көптеген мәселелер сұраудың белгіленген уақытта аяқталуына кедергі келтіруі мүмкін. Осылайша, сіз міндетті түрде ретімен қайтарылмайтын кезекте тұрған XHR сұрауларымен кездесуіңіз мүмкін.

JavaScript күту уақыты - белгіленген уақыт кешігуінен кейін (миллисекундпен) код бөлігін орындайтын жергілікті JavaScript функциясы. Бұл пайдаланушы сіздің бетіңізде біраз уақыт өткізгеннен кейін қалқымалы терезені көрсеткіңіз келгенде пайдалы болуы мүмкін. Немесе элементке меңзерді апарған кезде әсердің біраз уақыттан кейін ғана іске қосылуын қалайсыз. Осылайша, егер пайдаланушы кездейсоқ үстіне меңзерді апарып тастаса, әсерді байқаусызда іске қосудан аулақ бола аласыз.

Қарапайым setTimeout мысалы

Бұл функцияның қалай жұмыс істейтінін көрсету үшін түймені басқаннан кейін екі секундтан кейін қалқымалы терезе пайда болатын келесі демонстрацияны қарастырайық.

Демонстрацияны көру

Синтаксис

MDN құжаттамасы setTimeout үшін келесі синтаксисті береді:

var timeoutID = window.setTimeout(функ, ); var timeoutID = window.setTimeout(код, );

• timeoutID — таймерді өшіру үшін clearTimeout() функциясымен бірге пайдалануға болатын сандық идентификатор;
• func – орындалатын функция;
• код( альтернативті синтаксисте) орындалатын код жолы болып табылады;
• кешігу – функция іске қосылатын миллисекундтағы кідіріс ұзақтығы. Әдепкі мән - 0.

setTimeout және window.setTimeout

Жоғарыдағы синтаксис window.setTimeout пайдаланады. Неліктен?

Шын мәнінде, setTimeout және window.setTimeout бірдей функция болып табылады. Жалғыз айырмашылығы - екінші өрнекте біз жаһандық терезе нысанының қасиеті ретінде setTimeout әдісін қолданамыз.

Жеке менің ойымша, бұл кодты айтарлықтай қиындатады. Егер біз анықтайтын болсақ балама әдісБасымдық ретімен табуға және қайтаруға болатын JavaScript күту уақыты одан да көп мәселелерге әкеледі.

AT осы нұсқаулықТерезе нысанымен араласқым келмейді, бірақ жалпы қай синтаксисті пайдалану сізге байланысты.

Қолдану мысалдары

Бұл функция атауы болуы мүмкін:

explode()( alert("Boom!"); ) setTimeout(жарылу, 2000) функциясы;

Функцияға сілтеме жасайтын айнымалы:

var explode = function()( alert("Бум!"); ); setTimeout(жарылу, 2000);

Немесе анонимді функция:

setTimeout(функция()( alert("Бум!"); ), 2000);

• Мұндай код нашар қабылданады, сондықтан оны жаңарту немесе жөндеу қиын болады;
• Ол ықтимал осалдық болуы мүмкін eval() әдісін пайдалануды қамтиды;
• Бұл әдіс басқаларға қарағанда баяу, себебі ол іске қосылуы керек JavaScript аудармашысы.

Сондай-ақ, кодты тексеру үшін JavaScript күту уақыты туралы ескерту әдісін қолданып жатқанымызды ескеріңіз.

SetTimout параметріне параметрлерді беру

бірінші ( Сондай-ақ, кросс-браузер) опциясы, біз параметрлерді setTimeout арқылы орындалатын кері шақыру функциясына береміз.

Келесі мысалда біз сәлемдесу массивінен кездейсоқ сәлемдесуді шығарып, оны greet() функциясына параметр ретінде береміз, ол setTimeout арқылы 1 секунд кідіріспен орындалады:

function greet(greeting)( console.log(greeting); ) function getRandom(arr)( return arr; ) var greetings = ["Hello", "Bonjour", "Guten Tag"], randomGreeting = getRandom(greetings); setTimeout(функция()( greet(randomGreeting); ), 1000);

Демонстрацияны көру

Альтернативті әдіс

Осы мақаланың басындағы синтаксисте JavaScript күту уақыты арқылы орындалатын кері шақыру функциясына параметрлерді беру үшін пайдалануға болатын басқа әдіс бар. Бұл әдіскешігуден кейінгі барлық параметрлердің шығуын білдіреді.

Алдыңғы мысалға сүйене отырып, біз мынаны аламыз:

setTimeout(сәлемдесу, 1000, randomGreeting);

Бұл әдіс IE 9 және одан төмен нұсқаларында жұмыс істемейді, мұнда жіберілген параметрлер анықталмаған ретінде қарастырылады. Бірақ бұл мәселені шешу үшін MDN арнайы полифиллге ие.

Байланысты мәселелер және «бұл»

setTimeout арқылы орындалатын код оны шақырған функциядан бөлек жұмыс істейді. Осыған байланысты біз белгілі бір мәселелермен бетпе-бет келіп отырмыз, олардың шешімі ретінде біз пайдалана аламыз кілт сөзбұл.

var person = (бірінші аты: "Джим", таныстыру: function()( console.log("Сәлем, мен" + this.firstName); ) ); person.introduce(); // Шығарулар: Сәлем, мен" m Jim setTimeout(person.introduce, 50); // Нәтижелер: Сәлем, мен анықталмағанмын

Бұл шығыстың себебі бірінші мысалда бұл адам нысанына нұсқайды, ал екінші мысалда firstName қасиеті жоқ жаһандық терезе нысанына нұсқайды.

Бұл сәйкессіздіктен құтылу үшін сіз бірнеше әдістерді пайдалана аласыз:

Мұның мәнін күштеп көрсетіңіз

Мұны bind() арқылы жасауға болады, бұл әдіс шақырылған кезде осы кілттің мәні ретінде белгілі бір мәнді пайдаланатын жаңа функцияны жасайды. Біздің жағдайда көрсетілген тұлға объект. Бұл бізге нәтиже береді:

setTimeout(person.introduce.bind(адам), 50);

Ескертпе: Байланыстыру әдісі ECMAScript 5 жүйесінде енгізілген, яғни ол тек заманауи браузерлерде жұмыс істейді. Басқаларында оны қолдану кезінде сіз орындау уақытының қатесін аласыз. JavaScript «функцияның күту уақыты қатесі».

Кітапхананы пайдаланыңыз

Көптеген кітапханаларда осы мәселені шешуге қажетті кірістірілген функциялар бар. Мысалы, jQuery.proxy() әдісі. Ол функцияны қабылдайды және әрқашан белгілі бір контекстті пайдаланатын жаңасын қайтарады. Біздің жағдайда контекст келесідей болады:

setTimeout($.прокси(адам.енгізу, адам), 50);

Демонстрацияны көру

Таймерді өшіріңіз

setTimeout қайтару мәні - clearTimeout() функциясын пайдаланып таймерді өшіру үшін пайдалануға болатын сандық идентификатор:

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

Оны іс жүзінде көрейік. Келесі мысалда, егер сіз « кері санақты бастау”, кері санақ басталады. Аяқтағаннан кейін, котята өздеріне тиесілі болады. Бірақ түймені бассаңыз Кері санақты тоқтату”, JavaScript күту уақыты тоқтатылады және қалпына келтіріледі.

Мысалды көру

Жинақтау

setTimeout — асинхронды функция, яғни осы функцияға қабылданған қоңырау кезекке тұрады және стектегі барлық басқа әрекеттер аяқталғаннан кейін ғана орындалады. Ол басқа функциялармен немесе бөлек ағынмен бір уақытта жұмыс істей алмайды.

Дереккөз: http://learn.javascript.ru/settimeout-setinterval

Барлық дерлік JavaScript іске асыруларында берілген уақыт кезеңінен кейін шақырылатын функцияны жоспарлауға мүмкіндік беретін ішкі жоспарлаушы бар.

Атап айтқанда, бұл мүмкіндікке браузерлерде және Node.JS серверінде қолдау көрсетіледі.

SetTimeout

Синтаксис:

Опциялар:

• функция/код
  • Орындалатын функция немесе код жолы.
  • Жолға үйлесімділік үшін қолдау көрсетіледі және ұсынылмайды.
• кешіктіру
  • Миллисекундтағы кідіріс, 1000 миллисекунд 1 секундқа тең.
• arg1, arg2…
  • Функцияға өту үшін аргументтер. IE9- нұсқасында қолдау көрсетілмейді.
  • Функция кешіктіру параметрінде көрсетілген уақыттан кейін орындалады.

Мысалы, келесі код бір секундтан кейін alert("Hi") шақырады:

Егер бірінші аргумент жол болса, онда интерпретатор сол жолдан анонимді функция жасайды.

Яғни, мұндай жазба дәл солай жұмыс істейді:

SetTimeout("alert("Hello")" , 1000 );

Оның орнына анонимді функцияларды пайдаланыңыз:

SetTimeout( функция()( alert("Hi" ) ), 1000 );

Функцияның параметрлері және контекст

Барлық заманауи браузерлерде IE10-ды ескере отырып, setTimeout функция параметрлерін көрсетуге мүмкіндік береді.

Төмендегі мысал IE9-дан басқа барлық жерде «Сәлем, мен Васямын» шығарады:

…Алайда, көп жағдайда ескі IE үшін қолдау қажет және ол аргументтерді көрсетуге мүмкіндік бермейді. Сондықтан, оларды жіберу үшін олар қоңырауды анонимді функцияға орап алады:

setTimeout арқылы қоңырау шалу бұл контексттен өтпейді.

Атап айтқанда, setTimeout арқылы нысан әдісін шақыру жаһандық контексте жұмыс істейді. Бұл дұрыс емес нәтижелерге әкелуі мүмкін.

Мысалы, бір секундтан кейін user.sayHi() деп шақырайық:

setTimeout жаһандық контексте user.sayHi функциясын іске қосатындықтан, бұл арқылы нысанға қатынаса алмайды.

Басқаша айтқанда, бұл екі setTimeout қоңыраулары бірдей нәрсені жасайды:

Бақытымызға орай, бұл мәселе аралық функцияны жасау арқылы оңай шешіледі:

Орау функциясы аргументтерді кросс-шолғышқа жіберу және орындау контекстін сақтау үшін пайдаланылады.

Орындаудан бас тарту

setTimeout функциясы әрекетті болдырмау үшін пайдалануға болатын таймер идентификаторын қайтарады.

Синтаксис:

ClearTimeout(таймер идентификаторы)

Келесі мысалда біз күту уақытын орнатамыз, содан кейін жойамыз (ойымызды өзгертеміз). Нәтижесінде ештеңе болмайды.

SetInterval

setInterval әдісінде setTimeout сияқты синтаксис бар.

Аргументтердің мағынасы бір. Бірақ, setTimeout функциясынан айырмашылығы, ол функцияны бір рет іске қоспайды, бірақ белгілі бір уақыт аралығынан кейін оны жүйелі түрде қайталайды. Қоңырау шалу арқылы орындауды тоқтатуға болады:

ClearInterval(таймер идентификаторы)

Келесі мысал, іске қосылғанда, сіз Тоқтату түймешігін басқанша әр екі секунд сайын хабарды көрсетеді:

setInterval ішіндегі қоңырауларды кезекке қою және жинақтау

setInterval(функция, кідіріс) шақыру көрсетілген уақыт аралығынан кейін орындалатын функцияны орнатады. Бірақ бұл жерде бір нәзіктік бар.

Шын мәнінде, қоңыраулар арасындағы үзіліс көрсетілген интервалдан аз.

Мысалы, setInterval(function() ( func(i++) ), 100) алайық. Ол әр 100 мс функцияны орындайды, әр уақытта есептегішті арттырады.

Төмендегі суретте қызыл блок func орындалу уақыты болып табылады. Блоктар арасындағы уақыт – функцияның іске қосылуы арасындағы уақыт және белгіленген кешігуден аз!

Яғни, браузер функцияның орындалу уақытын есепке алмай, дәл әрбір 100 мс сайын функцияның орындалуын бастайды.

Функцияның орындалуы кідіріске қарағанда көбірек уақыт алады. Мысалы, функция күрделі және кідіріс қысқа. Немесе функцияда орындау ағынын блоктайтын ескерту / растау / шақыру мәлімдемелері бар. Бұл жағдайда қызықты нәрселер басталады.

Браузер бос емес болғандықтан функцияны іске қосу мүмкін болмаса, ол кезекке тұрады және браузер бос болған кезде орындалады.

Төмендегі сурет ұзақ уақыт орындалатын функция үшін не болатынын көрсетеді.

setInterval арқылы іске қосылған функция шақыруы кезекке қосылады және мүмкіндігінше дереу іске қосылады:

Функцияның екінші іске қосылуы біріншісі аяқталғаннан кейін бірден орын алады:

Орындау бір реттен артық кезекке қойылмайды.

Функцияның орындалуы бірнеше жоспарланған орындаудан ұзағырақ уақыт алса, ол әлі де бір рет кезекке тұрады. Сондықтан ұшырулардың «жинақтауы» жоқ.

Төмендегі суретте setInterval 200 мс ішінде функцияны орындауға тырысады және қоңырауды кезекке қояды. 300 және 400 мс жылдамдықта таймер қайтадан оянады, бірақ ештеңе болмайды.

setInterval(функция, кідіріс) шақыру орындалу арасындағы нақты кідіріске кепілдік бермейді.

Нақты кідіріс көрсетілгеннен үлкен немесе аз болатын кездер болады. Жалпы, кем дегенде қандай да бір кідіріс болатыны шындық емес.

Кірістірілген setTimeout қайталаңыз

Тұрақты қайталау ғана емес, іске қосулар арасындағы кідіріс қажет болған жағдайда, setTimeout функция орындалған сайын қайта орнатылады.

Төменде олардың арасында 2 секундтық интервалмен ескерту беретін мысал келтірілген.

Орындау уақыт шкаласында іске қосулар арасында бекітілген кешігулер болады. 100 мс кешігуге арналған иллюстрация:

Таймердің ең аз кідірісі

Браузер таймерінде мүмкін болатын ең аз кідіріс бар. Ол қазіргі браузерлерде шамамен нөлден 4 мс-ге дейін өзгереді. Егде жастағы адамдарда ол үлкенірек болуы және 15 мс жетуі мүмкін.

Әдепкі бойынша, ең аз кідіріс 4 мс құрайды. Сондықтан setTimeout(..,1) мен setTimeout(..,4) арасында ешқандай айырмашылық жоқ.

setTimeout және setInterval ішінде нөлдік кідіріспен шолғышқа тән әрекеттер бар.

1. Opera жүйесінде setTimeout(.., 0) setTimeout(.., 4) сияқты. Ол setTimeout(..,2) қарағанда жиі орындалады. Бұл браузердің мүмкіндігі.
2. Internet Explorer шолғышында SetInterval(.., 0) нөлдік кідіріс жұмыс істемейді. Бұл арнайы setInterval үшін қолданылады, яғни. setTimeout(.., 0) жақсы жұмыс істейді.

Нақты жұмыс жиілігі

Әрекет әлдеқайда аз болуы мүмкін.Кейбір жағдайларда кідіріс 4 мс емес, 30 мс немесе тіпті 1000 мс болуы мүмкін.

Көптеген браузерлер (бірінші кезекте жұмыс үстелі) қойынды белсенді емес болса да setTimeout/setInterval орындауды жалғастырады. Сонымен қатар, олардың бірқатары (Chrome, FF, IE10) таймердің минималды жиілігін секундына 1 ретке дейін азайтады. Таймер «фон» қойындысында іске қосылатыны белгілі болды, бірақ сирек.

Батареямен жұмыс істегенде, ноутбукта браузерлер кодты жиі орындау жиілігін баяулатады және батарея қуатын үнемдей алады. Бұл үшін IE әсіресе танымал. Параметрлерге байланысты азайту бірнеше есеге жетуі мүмкін. CPU жүктемесі тым жоғары болса, JavaScript таймерлерді уақытында өңдей алмауы мүмкін. Сонымен қатар, кейбір setInterval орындаладыөткізіп жібереді.

Қорытынды: 4 мс жиілікке назар аударған жөн, бірақ оған сенбеу керек.

Консольге интервалдарды шығару Қоңыраулар арасындағы уақыт аралығын есептейтін код келесідей көрінеді:

setTimeout (функ, 0) трюк

Бұл трюк JavaScript хакерлерінің жылнамасына кіруге лайық.

Ағымдағы сценарий аяқталғаннан кейін оны іске қосқысы келсе, функция setTimeout(func, 0) ішінде оралады.

Мәселе мынада, setTimeout ешқашан функцияны бірден орындамайды. Тек оны жүзеге асыруды жоспарлап отыр. Бірақ JavaScript аудармашысы жоспарланған функцияларды ағымдағы сценарийді орындағаннан кейін ғана орындай бастайды.

Әдепкі бойынша setTimeout бәрібір 0 кідірісі бар функцияны орындай алмайды.Бұған дейін айтқанымыздай, кідіріс әдетте 4 мс құрайды. Бірақ мұнда ең бастысы, кез келген жағдайда орындау ағымдағы кодты орындағаннан кейін болады.

Мысалға:

Барлығы

setInterval(func, delay) және setTimeout(func, delay) әдістері func жүйелі түрде/бір рет кешіктіру миллисекундтарында іске қосуға мүмкіндік береді.

Екі әдіс таймер идентификаторын қайтарады. Ол clearInterval / clearTimeout шақыру арқылы орындауды тоқтату үшін қолданылады.

| | белгіленген аралық | setTimeout | || ----------- | ---------- | | Уақыты | Қоңырау таймерде қатаң түрде бар. Аудармашы бос емес болса, бір қоңырау кезекке тұрады. Функцияның орындалу уақыты есепке алынбайды, сондықтан бір іске қосудың аяқталуынан екіншісінің басталуына дейінгі уақыт аралығы әртүрлі болуы мүмкін. | setTimeout рекурсивті шақыруы setInterval орнына пайдаланылады, мұнда орындалулар арасында бекітілген үзіліс қажет. | | Кешіктіру | Ең аз кідіріс: 4 мс. | Ең аз кідіріс: 4 мс. | | Браузер мүмкіндіктері | IE-де кешіктіру 0 жұмыс істемейді Opera-да нөлдік кідіріс 4 мс-ке тең, басқа кідірістер дәл өңделеді, соның ішінде стандартты емес 1 мс, 2 мс және 3 мс. |