javascript - 停止 Canvas 动画 setInterval

Question

我的以下设置运行得非常好...只是我无法阻止它!

帖子回答编辑:该问题与我的绘制函数组织有关，与 webWorker 或 ajax 调用无关

流程:

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

但是，我希望能够在收到特定值时停止 Canvas 动画和网络工作线程的循环。

(当你学习滑雪或开车时，他们会教你先刹车和 parking ，这是有原因的。我一直阻止我的浏览器窗口，尝试改变何时调用退出代码)

以下是相关代码部分，如果相关，请索取更多信息!

首先是 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);

因此，如果在 Canvas 动画工作中接收到特定值(这里我使用 ifanimationData[nextFrame]==88，那么它应该停止 Canvas 动画和网络工作人员!!!

Answer 1

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

clearTimeout(draw);

应该是:

var timerRef;  // global or parent scope

function draw() {
    ...

    timerRef = setTimeut(draw, 300);
}

然后清除它使用:

clearTimeout(timerRef);