停止画布动画 setInterval

Question

我的以下设置工作得非常好......只是我无法阻止它！

发布答案编辑：这个问题与我的绘图函数组织有关，与 webWorker 或 ajax 调用无关

过程：

1. 1 用户点击按钮调用 web worker
2. Web Worker 在 setInterval 计时器上使用 AJAX 调用 .php 页面
3. webworker然后将php数据处理并准备成一系列动画帧返回给主js
4. 然后，主 js 使用这些帧和 setInterval 绘制函数输出画布动画
5. 在画布动画完成之前，web worker ajax setInterval 已经再次触发，它会联系 php 代码，处理数据并 更多动画帧返回到画布动画（推送 到动画数组的末尾）
6. 画布仍在处理动画帧
7. 网络工作者请求、处理并向画布动画积压添加更多帧
8. 等等等等

但是我希望能够在收到某个值时停止画布动画和网络工作者的循环。

（当你学习滑雪或开车时，他们教你先刹车和停车是有原因的。我一直在阻止我的浏览器窗口，试图改变何时调用退出代码）

以下是相关代码部分，如果相关，请询问更多信息！

首先主要的 JS 工作

$( document ).ready(function() {
        var animationData = [];
        var worker; 
        function workerResultReceiver(event) {
             var nextFrame =0;
             var newAnimationData = event.data;
             animationData.push.apply(animationData,newAnimationData);
            var draw = function(){ 
                if (animationData[nextFrame]==88){
                    alert("animation ends here!!!");
                    clearTimeout(draw);//get out of the loop
                    //lets also deactivate the worker!!
                    worker.terminate(); // Terminating the worker 
                    worker = undefined ; 
                    return;
                }else{
                    //canvas clear draw etc with info from animationData[nextFrame]
                }
                nextFrame++;    
            }
            setInterval(draw,300);  
        }

        function workerErrorReceiver(event) {
            console.log("there was a problem with the WebWorker within " + event);
        }

        $("#startWorkermatchPage").click(function (){
            if (typeof (Worker) !== "undefined") {
                worker = new Worker("/js/webWorker.js");
                worker.onmessage = workerResultReceiver;
                worker.onerror = workerErrorReceiver;    
                worker.postMessage({ 
                    "beer": beer,
                    "pizza": pizza
                 });
             }
        });


        $("#stopWorkermatchPage").click(
        function () 
        { 
            worker.terminate(); // Terminating the worker 
            worker = undefined ; 
        });
});

这是 WEB WORKER 的工作原理，如果需要，请再次询问更多信息！

self.addEventListener('message', function (event) {

     var info = event.data;
    var beer = info['beer'];
    var  pizza= info['pizza'];

    var dataAjaxCall = setInterval(function(){ajaxTimer()},10000);
    var ServiceUrl = "../ajaxAnimation.php";
    var dinnerVariables = 'beer='+beer+'&pizza='+pizza;
    var ajaxCount = 0;

    function ajaxTimer() {
        GetData();
        function GetData() {
            debugger;
            try {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', ServiceUrl, false);
                xhr.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded");
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                        //Posting Back the Result
                            var ALLdataReceived = JSON.parse(xhr.responseText);
                            if (ajaxCount<11){
                                ajaxCount++;
                                //blah blah data processing to make animation arrays 
                                postMessage(dataReady);

                                if(ajaxCount>10){
                                    clearInterval(dataAjaxCall);
                                }

                            }else{
                                clearInterval(dataAjaxCall);
                            }

                        }
                    }
                };
                xhr.send(dinnerVariables);
            } catch (event) {
                postMessage("error");
            }
        }
    }


}, false);

因此，如果在画布动画工作中接收到特定值（这里我使用了 if animationData[nextFrame]==88，那么它应该停止画布动画和网络工作者！！！

Answer 1

setTimeout 和clearTimeout 的主要问题是它们没有正确使用。代码尝试使用对该方法的引用来清除间隔，而它应该是一个计时器reference：

clearTimeout(draw);

应该是：

var timerRef;  // global or parent scope

function draw() {
    ...

    timerRef = setTimeut(draw, 300);
}

然后清除它使用：

clearTimeout(timerRef);