На самом деле setInterval
имеет малоизвестный
синтаксис, позволяющий решить описанную в
предыдущем уроке проблему с контекстом.
Суть в том, что кроме первых двух параметров
в setInterval
можно передавать еще
дополнительные параметры. Эти дополнительные
параметры попадут в параметры привязанной функции.
Давайте посмотрим на примере. Пусть у нас есть вот такая функция, принимающая два параметра:
function func(str1, str2) {
console.log(str1, str2);
}
Давайте передадим эту функцию в setInterval
первым параметром, вторым параметром укажем
время, и еще сделаем два дополнительных параметра
'a'
и 'b'
:
setInterval(func, 1000, 'a', 'b');
Вот эти дополнительные параметры и будут
автоматически попадать в параметры нашей
функции func
.
Соберем все вместе и запустим:
setInterval(func, 1000, 'a', 'b');
function func(str1, str2) {
console.log(str1, str2); // каждую секунду будет вводить 'a','b'
}
Сделаем нашу функцию анонимной (компактнее, но менее очевидно):
setInterval(function(str1, str2) {
console.log(str1, str2);
}, 1000, 'a', 'b');
Решим теперь поставленную нами задачу, используя
описанную особенность setInterval
:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
setInterval(func, 1000, this); // параметром передаем this
function func(self) { // в self попадает this
console.log(self.value);
}
});
Сделаем более компактное решение через анонимную функцию:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
setInterval(function(self) {
console.log(self.value);
}, 1000, this);
});
Пусть дан такой код:
<input type="button" id="elem" value="10">
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
setInterval(function() {
this.value--;
}, 1000);
});
Автор кода хотел, чтобы по нажатию на кнопку,
значение этой кнопки каждую секунду уменьшалось
на 1
. Однако, по нажатию на кнопку
вообще ничего не происходит. Исправьте ошибку
автора кода, используя изученный в данном
уроке способ.