Као веб програмер, одзив и интерактивност ваше веб апликације су кључне компоненте корисничког искуства. Да бисте побољшали корисничко искуство ваше апликације, мораћете да додате динамичка понашања и имате контролу над временом када се одређени делови кода у вашој апликацији извршавају.
Метода сетТимеоут() је одличан алат за ово, јер вам омогућава да закажете извршавање кода, оркестрирате анимације, креирате тајмере и управљате асинхроним операцијама у вашој апликацији.
Због тога је важно разумети синтаксу сетТимеоут(), како је користити и како је можете применити у свом следећем пројекту. Овај чланак ће истражити управо то и пружити вам право знање које ће вам омогућити да максимално искористите метод сетТимеоут().
Преглед садржаја
ЈаваСцрипт-ова функција сетТимеоут
сетТимеоут() је глобални метод везан за објекат прозора и користи се за извршавање функције или дела кода, након одређеног периода. На пример, ако имате функцију коју желите да извршите после четири секунде, сетТимеоут() је метод који бисте користили да то постигнете.
Када се користи, метода сетТимеоут() поставља тајмер који одбројава док не прође време које сте навели, а затим извршава функцију или код који сте у њега унели.
То што је глобална метода значи да се сетТимеоут() налази унутар глобалног објекта и стога је доступан свуда без потребе за увозом. Глобални објекат, који је обезбеђен моделом објекта документа (ДОМ) у претраживачу, референцира се у прозору имена својства.
Стога можемо користити виндов.сетТимеоут() или једноставно сетТимеоут() јер ће се подразумевати прозор глобалног објекта. виндов.сетТимеоут() и сетТимеоут() немају разлике.
Општа синтакса за сетТимеоут() је следећа:
setTimeout(function, delay)
- функција – ово је функција која се извршава након одређеног времена.
- кашњење – време у милисекундама после којег треба да се изврши функција која је прошла. 1 секунда је еквивалентна 1000 милисекунди.
Када користите сетТимеоут() кашњење које наведете треба да буде нумеричка вредност да бисте избегли нежељене исходе. Аргумент кашњења је опциони. Ако није наведен, подразумевано је 0 и прослеђена функција се одмах извршава.
сетТимеоут() враћа јединствени идентификатор познат као тимеоутИД, који је позитиван цео број који јединствено идентификује тајмер креиран када се позове метода сетТимеоут().
Такође је важно напоменути да је сетТимеоут() асинхрона. Његов тајмер не зауставља извршавање других функција у стеку позива.
Како се користи сетТимеоут()
Хајде да погледамо примере који показују како се користи сетТимеоут() метод:
// setTimeout() with a function declaration
setTimeout(function () {
console.log("Hello World after 3 seconds");
}, 3000)
// setTimeout() with an arrow function
setTimeout(() => {
console.log("Hello World in an arrow function - 1 second")
}, 1000)
Излаз:
Hello World in an arrow function - 1 second Hello World after 3 seconds
У излазу изнад, други сетТимеоут() прво одјављује свој излаз јер има краће кашњење од 1 секунде, у поређењу са првим који има кашњење од 3 секунде. Као што је раније поменуто, сетТимеоут() је асинхрона. Када се позове први сетТимеоут() са кашњењем од 3 секунде, покреће се тајмер од 3 секунде, али не зауставља извршавање другог кода у програму.
Како метода одбројава од 3, извршава се остатак кода у стеку позива. У овом примеру, следећи део кода је други сетТимеоут() са кашњењем од 1 секунде. Пошто има много краће кашњење, то је разлог зашто се његов код извршава пре првог сетТимеоут()
Када користите сетТимеоут(), не морате директно писати функцију у методу сетТимеоут().
// function declaration
function greet() {
console.log("Hello there!")
}
// store a function in a variable - function expression
const speak = function () {
console.log("How are you doing?")
}
// using an arrow function
const signOff = () => {
console.log("Yours Sincerely: techblog.co.rs:)")
}
// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)
Излаз:
Hello there! How are you doing? Yours Sincerely: techblog.co.rs:)
Када дефинишемо метод негде другде, а затим га проследимо сетТимеоут(), оно што прослеђујемо методу сетТимеоут() је референца на функцију коју желимо да извршимо после датог времена.
сетТимеоут() са додатним параметрима
сетТимеоут() има алтернативну синтаксу која вам омогућава да унесете додатне параметре у метод сетТимеоут(). Ови параметри ће се користити у функцији коју извршите након кашњења.
Синтакса је следећа:
setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
Можете проследити било који број додатних параметара у зависности од броја аргумената потребних функцији на коју упућујете.
Размотрите функцију испод:
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
Ако желите да извршите горњу функцију након одређеног времена користећи сетТимеоут(), то можете учинити као што је приказано у наставку:
// setTimeOut() with additional parameters
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
setTimeout(greet, 2000, "John", "happy coding!");
Излаз:
Hello John, happy coding!
Запамтите, ако дефинишемо функцију негде другде и затим је проследимо у сетТимеоут(), оно што прослеђујемо је једноставно референца на функцију. У горњем примеру, прослеђујемо референтни греет, а не греет(), који позива функцију. Желимо да сетТимеоут() буде онај који позива функцију користећи њену референцу.
Због тога не можемо директно да унесемо додатне параметре, као што је приказано у наставку:
// This results in an ERR_INVALID_ARG_TYPE error
setTimeout(greet("John", "happy coding!"), 2000);
У коду изнад, функција греет се извршава одмах без чекања да прођу 2 секунде. Тада се јавља грешка. Резултат извршавања кода је приказан у наставку:
Отказивање сетТимеоут()
Можемо спречити извршавање функције заказано помоћу сетТимеоут() коришћењем методе цлеарТимеоут(). Тако нешто може бити неопходно ако смо подесили функцију да се извршава након одређеног периода, али не желимо да се функција извршава након што се испуне одређени услови или услови промене.
Синтакса за метод цлеарТимеоут() је као што је приказано у наставку:
clearTimeout(timeoutID)
цлеарТимеоут() узима један аргумент, тимеоутИД, који је јединствени идентификатор који враћа метода сетТимеоут().
Размотрите пример у наставку:
function text() {
console.log("This is not going to be printed")
}
function greet() {
console.log("Hello after 5 seconds")
}
// Schedule the function text() to be executed after 3 seconds
const timeOutID = setTimeout(text, 3000);
// cancelt text() timeout time using clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} cleared out`)
// Schedule the function greet() to be executed after 5 seconds
setTimeout(greet, 5000)
Излаз:
2 cleared out Hello after 5 seconds
Функција тект() се не извршава пошто се цлеарТимеоут() користи за поништавање њеног временског ограничења, чиме се спречава њено извршење.
Предности коришћења сетТимеоут()
Неке од предности коришћења методе сетТимеоут() укључују:
- Одлагање извршавања кода – примарна функција сетТимеоут() је да омогући програмерима да одложе извршење кода. Ово је кључна карактеристика приликом креирања анимација, управљања временским догађајима, а такође и контроле тока асинхроног кода. сетТимеоут() такође ослобађа главну нит за покретање другог кода.
- Имплементација тајмера – сетТимеоут() пружа једноставан начин за имплементацију једноставних тајмера у апликацију без потребе за коришћењем спољних библиотека или извођењем сложених операција са датумом.
- Пригушивање и уклањање одбијања – сетТимеоут() се може користити за ограничавање броја позивања одређених функција или извршења радњи, посебно током догађаја као што су померање или куцање. Са одбијањем, ваша апликација чека одређени временски период пре него што позове функцију. Пригушивање ограничава број позива функције у датом временском периоду. сетТимеоут() се може користити за постизање оба
- Побољшајте корисничко искуство – сетТимеоут() вам омогућава да побољшате корисничко искуство ваше апликације контролисањем када се одређене радње дешавају, као што су обавештења, упозорења, искачуће поруке и анимације. Ово је згодно за спречавање преоптерећења информацијама код корисника, чиме се побољшава корисничко искуство.
- Побољшајте перформансе веба – сетТимеоут() се може користити за побољшање перформанси и општег одзива веб апликација разбијањем сложених проблема на мање, много једноставније проблеме. Ови мањи проблеми се могу решити унутар сетТимеоут(), дозвољавајући другим деловима кода да наставе са извршавањем, чиме се не утиче на перформансе или одзив апликације.
Јасно је да је сетТимеоут() и моћан и веома користан када се праве апликације користећи ЈаваСцрипт.
Недостаци коришћења сетТимеоут()
Неки од недостатака коришћења сетТимеоут() укључују:
- Нетачно мерење времена – сетТимеоут() не може гарантовати тачно време када ће функција бити позвана или извршена операција. Понекад други лоше написани кодови доводе до услова трке који ће утицати на рад сетТимеоут(). Када користите вишеструке преклапајуће сетТимеоут()с, не можете увек бити сигурни у редослед извршења, посебно ако су укључене друге асинхроне операције
- Пакао повратног позива – Ако имате превише угнежђених позива сетТимеоут(), ваш код може постати тежак за читање и отклањање грешака. Такође ће бити веома тешко пратити ток логике у вашој апликацији. Коришћење превише сетТимеоут() такође може довести до проблема са меморијом у вашој апликацији ако се позивима сетТимеоут() не рукује правилно.
Док сетТимеоут() може да спречи неке изазове приликом његовог коришћења, придржавајући се најбоље праксе и добрих пракси кодирања, можете минимизирати или потпуно избећи недостатке у вашој апликацији.
Закључак
Метод сетТимеоут() се може користити за одлагање извршавања функција. сетТимеоут се обично користи за анимације, одложено учитавање садржаја и руковање временским ограничењима за захтеве.
На пример, можете користити сетТимеоут() да прикажете упозорења на вашим веб страницама. Док сетТимеоут() не гарантује тачно време извршавања функције, он гарантује њено извршење након одређеног кашњења.
Такође можете истражити ЈаваСцрипт ОРМ платформе за ефикасно кодирање.