JavaScript используется как язык программирования на стороне клиента, а также как язык программирования на стороне сервера. Этопредоставляет множество методов для легкого выполнения нескольких функций. Это то, что сделало один из самых популярных языков программирования, а также широко используется в нескольких видах разработки продуктов.SetInterval в JavaScript является частью временных событий в JavaScript, и мы узнаем о нем в следующей последовательности:
Время событий
JavaScript также позволяет выполнять функции а также методы в отношении времени, а не времени выполнения программы. Это позволяет выполнять функции в указанное время независимо от времени выполнения программы.
Двумя ключевыми методами использования временных событий в JavaScript являются:
setTimeout (функция, миллисекунда)
Эта функция выполняет функцию внутри, которая передается как параметр только один раз по истечении указанного времени в миллисекундах.
setInterval (функция, миллисекунда)
Эта функция выполняет функцию со времени выполнения и после каждого достигнутого интервала времени. Он повторяет выполнение функции на каждом временном интервале.
Теперь давайте продолжим и посмотрим, как работает SetInterval в JavaScript.
SetInterval в JavaScript
Первый параметр этой функции - это функция, которая должна выполняться, а второй параметр указывает интервал времени между каждым выполнением.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}Здесь document.getElementById получает элемент из который имеет идентификатор «demo», а функция d.toLocaleTimeString () выдает текущее время из системы.
java addactionlistener (это)
Следовательно, это повторяется каждые 1000 миллисекунд, что эквивалентно 1 секунде. Таким образом, функция повторно выполняется каждую 1 секунду и, следовательно, время обновляется каждую секунду.
Так как же остановить эту казнь? Давай выясним!
Как остановить казнь?
Мы можем остановить выполнение из функции setInterval () с помощью другой функции, называемой clearInterval ().clearInterval () использует переменную, возвращаемую функцией setInterval ().
функция сортировки в c ++
Например:
myVar = setInterval (функция, миллисекунды) clearInterval (myVar)
Ниже приведен пример, в котором используются как setInterval (), так и clearInterval (). Это запускает часы и предоставляет кнопку для остановки времени.
Ниже часы.
Остановить время
Нажмите кнопку выше, чтобы остановить время.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}
Вывод:
Еще несколько примеров с setInterval () и clearInterval ().
Создание динамического индикатора выполнения
#myProgress {width: 100% height: 30px position: relative background-color: #ddd} #myBar {background-color: # 4CAF50 width: 10px height: 30px position: absolute}
Нажмите Me function move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {width ++ elem.style.width = width + '%'}}}Вывод:
Первоначальный вывод
фреймворк, управляемый данными в selenium webdriver
Вывод после щелчка по кнопке с надписью «Click Me».
Переключение между двумя фоном
Прекратить переключение var myVar = setInterval (setColor, 300) function setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'yellow'? 'розовый': 'желтый'} функция stopColor () {clearInterval (myVar)}Вывод:
Цвет будет переключаться между желтым и розовым. Вышеупомянутый вывод - до нажатия на кнопку, а ниже - после щелчка по кнопке.
На этом мы подошли к концу нашей статьи о SetInterval в JavaScript. Надеюсь, вы поняли, как работает метод SetInterval.
Проверьте пользователя Edureka. Курс по сертификации веб-разработки поможет вам узнать, как создавать впечатляющие веб-сайты с помощью HTML5, CSS3, Twitter Bootstrap 3, jQuery и API Google и развертывать их в Amazon Simple Storage Service (S3).
Есть вопрос к нам? Пожалуйста, укажите это в комментариях к этому блогу, и мы свяжемся с вами.