Возможные предостережения в использовании setTimeout с аргументами вместо определения встроенной функции? - PullRequest
Новая
       18

Возможные предостережения в использовании setTimeout с аргументами вместо определения встроенной функции?

0 голосов
/ 12 сентября 2018

какие возможные предостережения могут быть в случае 2

case-1:

setTimeout(function(){ el.removeEventListener('click', console.log, true) }, 100 )

и case-2:

setTimeout(el.removeEventListener, 100, 'click', console.log, true)

Я действительно нахожу синтаксис case-1 уродливым, поэтому возникает вопрос.

1 Ответ

0 голосов
/ 12 сентября 2018

Ваш "Случай 2" не будет выполнен, потому что removeEventListener будет вызываться без какого-либо определенного значения this, и поэтому он не будет вызываться с this, установленным на el. Действительное сравнение будет:

Дело 1: 

setTimeout(function(){ el.removeEventListener('click', console.log, true) },  100 )

Случай 2: 

setTimeout(el.removeEventListener.bind(el), 100, 'click', console.log, true)
// ------------------------------^^^^^^^^^

То, что вы используете, зависит от того, что вы хотите сделать.

В этой конкретной ситуации не имеет значения, какой вы используете, если вы решаете проблему this. Но подумайте: 

var x = function() { /* do something */};
el.addEventListener("click", x, false);
setTimeout(function() { el.removeEventListener("click", x, true); }, 100);
x = function() { /* do something else */};
// ...

Этот вызов removeEventListener завершится неудачно, поскольку с момента запуска обратного вызова таймера x больше не относится к подключенной функции (это относится к другой функции). Но ваш предпочтительный синтаксис: 

var x = function() { /* do something */};
el.addEventListener("click", x, false);
setTimeout(el.removeEventListener.bind(el), 100, "click", x, true);
x = function() { /* do something else */};
// ...

... будет работать, потому что x вычисляется при вызове setTimeout, а не позже, поэтому оно относится к правильной функции.

Иногда вы хотите значение x позже, в этом случае вы будете использовать форму «Случай 1». Если вы хотите, чтобы x был оценен сразу, «Вариант 2» - это форма, которую вы хотите использовать.

Примечание: использование true в качестве третьего аргумента для addEventListener / removeEventListener встречается относительно редко. Он перехватывает (и отцепляет) обработчики для фазы capture события, а не для более обычной фазы всплытия.

...