使用while循环绑定事件页面持续加载卡顿，for循环却正常？

问题出在你while循环的i自增位置：

你把i++放在了点击事件的回调函数里，这意味着只有用户点击按钮时，i才会增加。但while循环的执行逻辑是：只要i < 7就会一直循环。初始i是0，在循环过程中i从来没被修改过（因为点击事件还没触发），所以循环会无限执行——一直在给索引为0的按钮重复绑定点击事件，浏览器资源被占满，自然就卡顿了。

对比正常的for循环，它的i++是在每次迭代结束后自动执行的，所以循环会正常遍历0到6的索引，绑定完7个按钮的事件后就终止了。

修复方案 #

把i++从回调里移到while循环的每次迭代末尾，和for循环的逻辑对齐：

var i = 0;
while (i < 7) {
    document.querySelectorAll("button")[i].addEventListener("click", 
        function () {
            alert("Hi there! I'm working ");
        }
    );
    // 每次循环后让i自增，确保循环能正常终止
    i++;
}

这样循环就会和for循环一样，遍历所有7个按钮，绑定完事件后就停止，不会出现无限循环导致的卡顿。

内容的提问来源于stack exchange，提问作者Manik Das