首页 > 解决方案 > 无法将此绑定到功能

问题描述

我有一个 DOM 元素 btn 并具有侦听此元素的 setTimeout 功能。我想在函数运行时删除我的监听器,以防止多次调用 setTimeout 和时间重叠,但是在我的回调函数中是 window? 我尝试使用绑定,但它不工作

const checkTable = () => {
  this.removeEventListener('click', checkTable);
  console.log(this); // i get "window"
  setTimeout(() => {
     //some code
  }, 3000);
};

const app = () => {
  const checkBtn = document.querySelector('.check-btn');
  checkBtn.addEventListener('click', checkTable.bind(checlBtn))
};

app();

和 onclick 事件的结果相同

标签: javascriptevents

解决方案


你不能调用.bind()箭头函数。箭头函数用于自动使用this定义位置的值。为此,您checkTable需要成为“正常”功能。

function checkTable() {
  this.removeEventListener('click', checkTable);
  console.log(this); // i get "window"
  setTimeout(() => {
     //some code
  }, 3000);
}

推荐阅读