Таймер JS, что вам нужно знать

JavaScript

задний план:

1.数据展示页加一个自动刷新功能，让用户看到最新数据。 
2.加个定时，过*（时间段）后执行，实现xx效果。
3.调整一下这几个事件响应的执行顺序等等。。。

В процессе разработки мы часто используем таймеры для выполнения определенных требований. js подготовил для нас две функции: setTimeout и setInterval, прежде чем перейти к теме, давайте кратко познакомимся с ними

1.setTimeout：
var timerId =setTimeout(function(){
    //do    
},delay)

2.setInterval
var timerId2 = setInterval(function() {
    //do
}, delay)
//delay 时间周期

Во-первых, они оба возвращают целое число для представления таймера. Передайте это значение соответствующему методу очистки, чтобы отменить отсчет времени.

Во-вторых, setTimeoutожидатьВыполнить функцию после задержки (delay) мс, setIntervalожидатьФункция выполняется один раз в каждый интервал (задержку) мс.

Почему просто говорят ожидать этого? предыдущий 🌰 смотреть

var start_date = 0;
setTimeout(function(){
	var end_date = new Date().getTime()/1000
	console.log('enter setTimeout date : ' +  end_date)
	console.log('time interval : '  + (end_date - start_date) + '秒')
},1000)
function bulky(){
	start_date = new Date().getTime()/1000;
	console.log("bulky start date : " + start_date)
	for(var i=0;i<100000;i++){
		for(var j=0;j<100000;j++){
			var k = 0;
			k = k*k;
		}
	}
}
bulky()

Сначала предскажите результат, а затем запустите код, результат будет следующим:

Результат такой же, как вы себе представляли? Вы обнаружите, что setTimeout не выполняется так, как ожидалось — он выполняется после задержки в 1 с, но выполняется после завершения выполнения bulky(), что является случаем, когда таймер не рассчитан.

Как реализован таймер? Почему возникают неровности?

Во-первых, мы должны очистить:JavaScript работает в одном потоке. Основное использование JavaScript — взаимодействие с пользователем и управление DOM. Конфликты могут возникать в многопоточном режиме. Предположим, что с элементом DOM одновременно работают два потока. Поток 1 требует от браузера удалить DOM, а поток 2 требует изменения стиля DOM. В настоящее время браузер не может решить, какой поток использовать. Конечно, мы можем ввести механизм «блокировки» для браузера для разрешения этих конфликтов, но это значительно увеличивает сложность, поэтому JavaScript с самого своего рождения выбрал однопоточное выполнение. В определенное время может выполняться только одна конкретная задача, и она будет блокировать выполнение других задач.

Но в JavaScript есть модель параллелизма (а не параллелизма), основанная на «Цикле событий». Первое — логическое совпадение, второе — физическое совпадение. Следовательно, одноядерный процессор также может обеспечить параллелизм.

Приведенная выше диаграмма иллюстрирует параллелизм и параллелизм:

Давайте проиллюстрируем цикл событий с помощью рисунка выше.

Поскольку js является однопоточным, это означает, что все задачи должны быть поставлены в очередь. Все задачи можно разделить на два типа, одна — синхронная задача (sync), другая — асинхронная задача (asynchronous)

  • Синхронные задачи относятся к задачам, поставленным в очередь для выполнения в основном потоке.Только когда выполняется предыдущая задача, может выполняться следующая задача, формируя стек контекста выполнения.

  • Асинхронные задачи относятся к задачам, которые не входят в основной поток, а входят в «очередь задач» (task queue). «Очередь задач» — это очередь событий (которую можно понимать как очередь сообщений). Когда устройство ввода-вывода завершает задачу или асинхронная задача имеет текущий результат, в «очередь задач» добавляется событие, указывающее, что связанная операция может войти в «стек выполнения», и она ожидает вызова стека выполнения. .

Ссылаясь на схему Event Loop, давайте поговорим об общем процессе ----> Функции потокового выполнения (задачи синхронизации) в стеке выполнения, могут вызываться API для добавления событий (onlick, onload и т. д.) в очередь задач но не казнен. Только когда в текущем стеке выполнения нет другой операции, очередь задач будет помещена в стек выполнения, и выполнение будет выполнено.

С принципом покончено, вернемся к теме.Поскольку setTimeout и setInterval являются асинхронными задачами, они не войдут в стек выполнения сразу после вызова, а попадут в очередь задач, поэтому они войдут в стек выполнения для выполнения только тогда, когда в текущем стеке выполнения нет других операций.Это причины, по которым таймеры не всегда синхронизированы.

Да, кстати, если период задержки установлен на 0, это эквивалентно операции сокращения очереди

Пример

🌰 Предложение:

function f1(){
	console.log('f1')
}
function f2(){
	console.log('f2')
}
function f3(){
	console.log('f3')
	setTimeout(function(){
		console.log('setTimeout1')
	},2000)
}
setTimeout(function(){
	console.log('setTimeout2')
},3000)
setTimeout(function(){
	console.log('setTimeout3')
},1000)
setTimeout(function(){
	console.log('setTimeout4')
},0)

f1()
f2()
f3()

результат операции

Ну, приведенный выше контент — это мое понимание таймера js, я надеюсь, что он может вам помочь.

Воспроизведение без моего разрешения запрещено. В статье есть упущения и поверхностность, прошу меня поправить

Категории