передавая это через addEventListener - PullRequest
Новая
       20

передавая это через addEventListener

0 голосов
/ 11 апреля 2019

У меня есть функция, которая ранее работала; но я должен подождать с setTimeout. Я подумал, что мог бы просто добавить функцию стрелки в качестве обратного вызова для eventListener и по-прежнему иметь возможность передавать this в качестве кнопки для контекста, но я получаю ошибку. 

button.addEventListener("click", () => {
    setTimeout(checkAndRespond,1500);
});

//This is the line that throws the error
checkAndRespond = async function () {
    ...
    const row = this.parentElement.parentElement;
    ...
}

Как мне передать this во внутреннюю функцию?
Передается ли контекст setTimeout как this в checkAndRespond?
Есть ли что-то, что я не понимаю о том, как работают функции стрелок?

1 Ответ

2 голосов
/ 11 апреля 2019

Как мне передать это во внутреннюю функцию?

Какой this?Функции стрелок принимают контекст (this) своих родительских функций, который в данном случае является глобальной областью действия, и для этого this указывает на window.Если вы хотите вызывать функцию динамически в определенном контексте (это то, что делают addEventListener), вы должны использовать обычный function.

Передается ли контекст setTimeout какэто проверить AndRespond?

Нет.Вы должны .bind контекст вручную: 

 button.addEventListener("click", function() { // <- now we can work with this here
   setTimeout(checkAndRespond.bind(this), 1500); // <- and bind it
 });

Или вы используете поведение функций стрелок, как описано выше, и передаете this в качестве аргумента: 

 button.addEventListener("click", function() {
   setTimeout(() => checkAndRespond(this), 1500);
 });

 async function checkAndRespond(button) {
   //...
 }

Sidenotes:

Вы также можете просто использовать button вместо this, но это, вероятно, будет слишком просто.

checkAndRespond = - необъявленная (!!) переменная, всегда объявляйте их!

...