按钮切换绑定事件bug

问题描述 投票:0回答:1

重新赋值getRes时,num的打印值保持不变,但重新绑定DOM点击事件时不会出现这个问题。是什么原因导致这个问题?

我尝试过切换箭头函数、使用其他普通函数绑定等,猜测问题与DOM底层绑定事件机制有关

<!DOCTYPE html>
<html lang="en">

<body>
  <button id="btn" onclick="getRes">button</button>
  <script>
    function getRes(resolve, num) {
      console.log(num);
      resolve();
    }
    document.querySelector("#btn").onclick = () => {
      getRes();
    }
    async function start() {
      console.log('start');
      for (let i = 0; i < 9; i++) {
        await new Promise(function(resolve) {
          getRes = getRes.bind(this, resolve, i);
          // document.querySelector("#btn").onclick = getRes.bind(this, resolve, i);
        })
      }
      console.log('end')
    }
    start();
  </script>
</body>

</html>

javascript html dom
1个回答
-1
投票

删除了按钮元素中的不正确的onclick属性,并在脚本中添加了正确的事件监听器。 更改了在 start 函数内的循环中调用 getRes 函数的方式。 现在,当您单击按钮时,它应该在控制台中记录从 0 到 8 的数字,然后相应地打印“开始”和“结束”。

<!DOCTYPE html>
<html lang="en">

<body>
  <button id="btn">button</button>
  <script>
    function getRes(resolve, num) {
      console.log(num);
      resolve();
    }

    document.querySelector("#btn").onclick = async () => {
      await start();
    }

    async function start() {
      console.log('start');
      for (let i = 0; i < 9; i++) {
        await new Promise(function(resolve) {
          getRes(resolve, i);
        })
      }
      console.log('end')
    }
  </script>
</body>

</html>
© www.soinside.com 2019 - 2024. All rights reserved.