如何在 Javascript 中创建后台进程

Question

我正在编写一个网络进程来模拟 Connect4 棋盘游戏。我已经使用具有七列和六行的敏捷控制器设置了它，每个单元格都引用为 c1r1，如下所示。

$scope.c1r1 = $scope.counterWhite;
$scope.c1r2 = $scope.counterWhite;
$scope.c1r3 = $scope.counterWhite;
.
.
$scope.c7r4 = $scope.counterWhite;
$scope.c7r5 = $scope.counterWhite;
$scope.c7r6 = $scope.counterWhite;

当用户点击任何单元格时，它会引发一个事件，我想显示计数器在可用单元格中下降，代码如下

$scope.c1r1 = $scope.counterYellow;
setTimeout(fillC1(), 1000);        
$scope.c1r1 = $scope.counterWhite; 
$scope.c1r2 = $scope.counterYellow;

setTimeout(fillC1(), 1000);        
$scope.c1r2 = $scope.counterWhite; 
$scope.c1r3 = $scope.counterYellow;

setTimeout(fillC1(), 1000);        
$scope.c1r3 = $scope.counterWhite; 
$scope.c1r4 = $scope.counterYellow;

setTimeout(fillC1(), 1000);        
$scope.c1r4 = $scope.counterWhite; 
$scope.c1r5 = $scope.counterYellow;

setTimeout(fillC1(), 1000);        
$scope.c1r5 = $scope.counterWhite; 
$scope.c1r6 = $scope.counterYellow;

当我运行时，什么也没有发生，计数器只是出现在底部，所以我需要一个线程来使其正常工作，但由于 JavaScript 不进行线程处理，我想知道是否有另一个答案，例如 Web Workers。

Answer 1

Web Worker 无权访问 DOM，它们用于计算。我不确定你为什么要使用后台线程，但你可以这样做：

假设您用后台代码编写了一个脚本，它会在处理完内容后发布消息（稍后会返回：

function doWork() {
    postMessage("did something");
    setTimeout(doWork, 2000);
}
doWork();

现在，检查浏览器是否支持 web workers，创建一个，并监听从它发布的消息：

if(typeof(w) == "undefined") {
    executer = new Worker("background.js");
}
executer.onmessage = function(event){
    document.getElementById("results").innerHTML = event.data;
};

完成后，您可以像这样删除它： executer.terminate();

Answer 2

是的，您设置单元格的方式是问题的一部分。

不要加载 $scope.cXrY 个变量，而是使用数组：

$scope.cells = [];
var x, y;
for(x = 0; x < 7; x ++){
    $scope.cells[x] = [];
    for(y = 0; y < 6; y ++){
        $scope.cells[x][y] = $scope.counterWhite;
    }
}

好了，所有单元格都在一个变量中。
您可以使用 $scope.cells[2][4].

而不是 $scope.c2r4

现在，对于遍历单元格的计数器：

function iterateOverCells(){
    fillC1()

    $scope.cells[x][y] = $scope.counterWhite; // Make the previous cell white

    x++;        // Get next cell position
    if(x >= 7){
        x = 0;
        y++;
    }

    $scope.cells[x][y] = $scope.counterYellow; // Current cell yellow
    if(x < 7 && y < 6)                         // If we're not at the last cell
        setTimeout(iterateOverCells, 1000);    // Go to the next cell in 1 second
}

var x = 0, y = 0;
$scope.cells[x][y] = $scope.counterYellow; // Make the first cell yellow
setTimeout(iterateOverCells, 1000);        // Next cell in 1 second

如何在 Javascript 中创建后台进程

How to create a background process in Javascript

javascript

multithreading

worker