Javascript事件处理程序/ requestAnimationFrame数据竞争

Question

我有两段代码。一个是requestAnimationFrame循环，它遍历一个数组，对每个元素进行一些计算，然后渲染一个场景。我还有一个用于修改数组状态的按钮的事件处理程序（删除一些元素）。这两件看起来像这样：

function update(delta) {
    var to_remove = [];
    for (var i = 0; i < arr.length; i++) {
        // Computations
        if (cond) {
            to_remove.push(i);
        }
    }
    for (var j = 0; j < to_remove.length; j++) {
        // This is where the error occurs, since j has been deleted.
        arr[j].some_field = null;
        arr.shift(j, 1);
    }
}
function render() {
    requestAnimationFrame( render );
    var new_time = Date.now();
    update(new_time - last_time);
    last_time = new_time;
    // Render scene
}
render();

我的事件处理程序只调用数组元素{@ 1}}上的remove：

arr

我偶尔会得到一个似乎是数据竞争的东西：我会在尝试删除数组中的越界索引时遇到错误，这使得我认为它已经被删除并且$("#my_button").click(function () { arr[j].some_field = null; arr.shift(i, 1); }); 正在与事件处理程序分开的一个线程中运行，因此两者正在访问相同的数据。任何人都可以确认/否认这一点或建议我如何避免这些数据竞赛吗？

谢谢！