重新赋值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>
删除了按钮元素中的不正确的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>