使用setTimeout依次点击NodeList元素报错，求简洁替代方案

问题背景 #

我通过querySelectorAll获取了一个包含676个可点击组件的NodeList：

NodeList(676) [div.tile.tooltip, div.tile.tooltip, div.tile.tooltip.tooltipstered, div.tile.tooltip, div.tile.tooltip, div.tile.tooltip, div.tile.tooltip, div.tile.tooltip.tooltipstered, div.tile.tooltip.tooltipstered, div.tile.tooltip, div.tile.tooltip, div.tile.tooltip.tooltipstered, ...

想要依次点击每个元素，每次间隔2秒，于是编写了如下代码：

var tile = document.querySelectorAll(".perspectivesInner.clearFix > div");
var t = new Array();
for( let i = 0 ; i < tile.length ; i++ ) {
    (function(){    
        // create a closure (new scope)
        var _i = i;   
        // make a local copy of `i` from the outer scope
        t[i] = setTimeout( function(){return tile[i].click()}, i*2000 );
    })();
}

代码能完成点击操作，但控制台抛出错误：

VM2642:5 Uncaught TypeError: Cannot read properties of undefined (reading 'click')at :5:52

错误原因 #

你额外创建的闭包里虽然声明了_i，但定时器回调里实际引用的还是外层循环的i；而且let本身已经提供了块级作用域，多余的闭包反而导致变量引用混乱，最终在定时器触发时，i可能已经超出NodeList的索引范围，导致访问tile[i]得到undefined。

简洁替代方案 #

方案1：使用forEach遍历（最简洁） #

const tiles = document.querySelectorAll(".perspectivesInner.clearFix > div");
tiles.forEach((tile, index) => {
  setTimeout(() => tile.click(), index * 2000);
});

forEach的回调函数会为每个迭代绑定独立的tile和index，完全避免变量引用问题，代码精简易读。

方案2：用for...of配合entries() #

const tiles = document.querySelectorAll(".perspectivesInner.clearFix > div");
for (const [index, tile] of tiles.entries()) {
  setTimeout(() => tile.click(), index * 2000);
}

通过entries()获取索引与元素的迭代器，for...of的块级作用域确保每个tile的引用正确，逻辑直观。

方案3：递归实现（支持中途中断） #

如果需要在某些条件下停止点击流程，递归方案更灵活：

const tiles = document.querySelectorAll(".perspectivesInner.clearFix > div");
let currentIndex = 0;

function clickNextTile() {
  if (currentIndex >= tiles.length) return;
  tiles[currentIndex].click();
  currentIndex++;
  setTimeout(clickNextTile, 2000);
}

// 启动点击流程
clickNextTile();

每次点击完成后延迟2秒调用自身，可通过修改currentIndex或添加判断条件随时终止流程。

内容的提问来源于stack exchange，提问作者Working dollar