Марейн Хавербеке - Выразительный JavaScript

Функция setTimeoutсхожа с requestAnimationFrame. Она планирует запуск другой функции в будущем. Но вместо вызова функции при следующей перерисовке страницы, она ждёт заданное в миллисекундах время. Эта страница через две секунды превращается из синей в жёлтую:

document.body.style.background = "blue";

setTimeout(function() {

document.body.style.background = "yellow";

}, 2000);

Иногда вам надо отменить запланированную функцию. Это можно сделать, сохранив значение, возвращаемое setTimeout, и затем вызвав с ним clearTimeout.

var bombTimer = setTimeout(function() {

console.log("BOOM!");

}, 500);

if (Math.random() < 0.5) { // 50% chance

console.log("Defused.");

clearTimeout(bombTimer);

}

Функция cancelAnimationFrameработает так же, как clearTimeout– вызов её со значением, возвращённым requestAnimationFrame, отменит этот кадр (если он уже не был вызван).

Похожий набор функций, setIntervalи clearIntervalиспользуется для установки таймеров, которые будут повторяться каждые X миллисекунд.

var ticks = 0;

var clock = setInterval(function() {

console.log("tick", ticks++);

if (ticks == 10) {

clearInterval(clock);

console.log("stop.");

}

}, 200);

У некоторых событий есть возможность выполняться быстро и много раз подряд (например, "mousemove"и "scroll"). При обработке таких событий надо быть осторожным и не делать ничего «тяжёлого», или ваш обработчик займёт столько времени на выполнение, что взаимодействие с документом будет медленным и прерывистым.

Если в таком обработчике надо сделать что-то нетривиальное, можно использовать setTimeout, чтобы гарантировать, что вы делаете это не слишком часто. Это обычно называют «устранением помех» в событии. К этому существует несколько слегка различающихся подходов.

В первом примере надо сделать что-то, когда пользователь печатает, но не надо делать это сразу после запуска каждого события нажатия на клавиши. Когда они быстро печатают, нам надо подождать, когда возникнет пауза. Вместо немедленного выполнения действия в обработчике, мы устанавливаем таймаут. Также мы очищаем предыдущий таймаут, если он был, так что если события близко одно от другого (ближе, чем задержка таймера), предыдущее событие будет отменено.

Напишите тут что-нибудь...

var textarea = document.querySelector("textarea");

var timeout;

textarea.addEventListener("keydown", function() {

clearTimeout(timeout);

timeout = setTimeout(function() {

console.log("Вы остановились.");

}, 500);

});

Если задать undefinedдля clearTimeout, или вызвать его с таймаутом, который уже произошёл, то ничего не произойдёт. Таким образом, не надо осторожничать при его вызове, и мы просто поступаем так для каждого события.

Можно использовать немного другой подход, если нам надо разделить ответы минимальными промежутками времени, но при этом запускать их в то время, когда происходят события, а не после. К примеру, надо реагировать на события "mousemove", показывая текущие координаты мыши, но только каждые 250 миллисекунд.

function displayCoords(event) {

document.body.textContent =

"Мышь на " + event.pageX + ", " + event.pageY;

}

var scheduled = false, lastEvent;

addEventListener("mousemove", function(event) {

lastEvent = event;

if (!scheduled) {

scheduled = true;

setTimeout(function() {

scheduled = false;

displayCoords(lastEvent);

}, 250);

}

});

Обработчики событий позволяют обнаруживать и реагировать на события, над которыми мы не властны. Для их регистрации используется метод addEventListener.

У событий есть определяющий их тип ( "keydown", "focus", и так далее). Большинство событий вызываются конкретными узлами DOM, и затем распространяются на их предков, позволяя связанными с ними обработчикам обрабатывать их.

При вызове обработчика ему передаётся объект события с дополнительной информацией о событии. У объекта также есть методы, позволяющие остановить дальнейшее распространение ( stopPropagation) и предотвратить обработку события браузером по умолчанию ( preventDefault).

Нажатия на клавиши запускают события "keydown", "keypress"и "keyup". Нажатия на кнопки мыши запускают события "mousedown", "mouseup"и "click". Движения мыши запускают события "mousemove"и, возможно, "mouseenter"или "mouseout".

Прокрутку можно обнаружить через событие "scroll", а изменения фокуса через события "focus"и "blur". Когда заканчивается загрузка документа, у объекта windowзапускается событие "load".

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

В промежутке с 1928 по 2013 год турецкие законы запрещали использование букв Q, W и X в официальных документах. Это являлось частью общей инициативы подавления курдской культуры – эти буквы используются в языке курдов, но не у турков.

В качестве упражнения на тему странного использования технологий, я прошу вас запрограммировать поле для ввода текста (тег ) так, чтобы эти буквы нельзя было туда вписать. Насчет копирования и вставки и других подобных возможных обходов правила не беспокойтесь.

var field = document.querySelector("input");

// Your code here.

В ранние дни JavaScript, когда было время кричащих домашних страниц с обилием анимированных картинок, люди использовали язык очень вдохновляющими способами. Одним из них был «след мыши» — серия картинок, которые следовали за курсором при его движении по странице.

Я хочу, что бы вы в упражнении сделали такой след. Используйте с абсолютным позиционированием, фиксированным размером и цветом фона. Создайте кучку элементов и при движении мыши показывайте их следом за курсором.

К этому можно подойти многими способами. Можно сделать очень простое или очень сложное решение, как угодно. Простое – хранить фиксированное количество элементов и проходить по ним в цикле, двигая каждый следующий на текущее место курсора, каждый раз когда случается событие "mousemove".

.trail { /* className для элементов, летящих за курсором */

position: absolute;

height: 6px; width: 6px;

border-radius: 3px;

background: teal;

}

body {

height: 300px;

}

// Ваш код.

Интерфейс закладок встречается часто. Он позволяет вам выбирать панель интерфейса, выбирая одну из нескольких торчащих закладок над элементом.

В упражнении вам нужно сделать простой интерфейс закладок. Напишите функцию asTabs, которая принимает узел DOM, и создаёт закладочный интерфейс, показывая дочерние элементы этого узла. Ей нужно вставлять список элементов вверху узла, по одному на каждый дочерний элемент, содержащих текст, полученный из атрибута data-tabname. Все, кроме одного из дочерних элементов, должны быть спрятаны (при помощи display style none), а текущий видимый узел можно выбирать нажатием кнопки.