Какво е SetInterval в JavaScript и как работи?

JavaScript се използва като език за програмиране от страна на клиента, както и език за програмиране от страна на сървъра. Топредоставя множество методи за няколко функционалности, които да се изпълняват с лекота. Това е, което направи един от най-популярните езици за програмиране, както и той се използва широко в няколко вида разработка на продукти.SetInterval в JavaScript е част от Timing Events в JavaScript и ще научим за него в следната последователност:

• Времеви събития
• SetInterval в JavaScript
• Как да спрем изпълнението?

Времеви събития

JavaScript също позволява изпълнението на функции както и методи по отношение на времето, а не времето на изпълнение на програмата. Това позволява изпълнението на функциите в определеното време, независимо от времето на изпълнение на програмата.

Двата ключови метода за използване на синхронизиращите събития в JavaScript са:

• setTimeout (функция, милисекунда)

  
  
  

Тази функция изпълнява функцията вътре, която се предава като параметър само веднъж след определеното време в милисекунди.

• setInterval (функция, милисекунда)

Тази функция изпълнява функцията от времето за изпълнение и след всеки достигнат интервал от време. Той повтаря изпълнението на функцията във всеки интервал от време.

Сега да продължим напред и да видим как работи SetInterval в JavaScript.

SetInterval в JavaScript

Първият параметър на тази функция е функцията, която трябва да се изпълни, а вторият параметър показва интервала от време между всяко изпълнение.

var myVar = setInterval (myTimer, 1000) функция myTimer () {var d = нова дата () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Тук document.getElementById получава елемента от който има идентификатора като „demo“, а функцията d.toLocaleTimeString () дава текущото време от системата.

Следователно, това се повтаря на всеки 1000 милисекунди, което е еквивалентно на 1 секунда. По този начин функцията се изпълнява многократно на всеки 1 секунда и следователно времето се актуализира всяка секунда.

И така, как да спрем това изпълнение? Нека разберем!

Как да спрем изпълнението?

Можем да спрем изпълнението от функцията setInterval () с помощта на друга функция, наречена clearInterval ().clearInterval () използва променливата, върната от функцията setInterval ().

Например:

myVar = setInterval (функция, милисекунди) clearInterval (myVar)

По-долу е даден пример, който използва както setInterval (), така и clearInterval (). Това стартира часовник и осигурява бутон за спиране на часа.

 
Отдолу има часовник.
Време за спиране 
 
Щракнете върху бутона по-горе, за да спрете часа.
var myVar = setInterval (myTimer, 1000) функция myTimer () {var d = нова дата () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Изход:

внедряване на приоритетна опашка c ++

Още няколко примера с setInterval () и clearInterval ().

Създаване на динамична лента за напредъка

#myProgress {ширина: 100% височина: 30px позиция: относителен фон-цвят: #ddd} #myBar {фон-цвят: # 4CAF50 ширина: 10px височина: 30px позиция: абсолютно} 
Щракнете върху мен функция move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {ширина ++ elem.style.width = ширина + '%'}}}

Изход:

Първоначалният изход

Извеждане след щракване върху бутона, който казва „Щракнете върху мен“.

Превключване между два фона

Спрете да превключвате var myVar = setInterval (setColor, 300) функция setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'жълто'? 'розово': 'жълто'} функция stopColor () {clearInterval (myVar)}

Изход:

Цветът ще се превключва между жълт и розов. Горният изход е преди да щракнете върху бутона, а по-долу е след щракването върху бутона.

С това стигнахме до края на нашата SetInterval в статията за JavaScript. Надявам се, че сте разбрали как работи методът SetInterval.

Вижте от Edureka. Обучението за сертифициране на уеб разработки ще ви помогне да научите как да създавате впечатляващи уеб сайтове с помощта на HTML5, CSS3, Twitter Bootstrap 3, jQuery и Google API и да го внедрите в Amazon Simple Storage Service (S3).

Имате въпрос към нас? Моля, споменете го в раздела за коментари на този блог и ние ще се свържем с вас.