停止 Canvas 动画 setInterval

Question

我有以下设置工作得很好......只是我无法阻止它！

POST 答案编辑：这个问题与我对绘制函数的组织有关，与 webWorker 或 ajax 调用

无关

过程：

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

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

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

这里应该是相关的代码部分，如果相关请索取更多信息！

首先是主要的 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 动画工作中收到特定值（这里我使用了 if animationData[nextFrame]==88，那么它应该停止 canvas 动画和网络工作者!!!

Answer 1

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

clearTimeout(draw);

应该是：

var timerRef;  // global or parent scope

function draw() {
    ...

    timerRef = setTimeut(draw, 300);
}

然后清除它使用：

clearTimeout(timerRef);

停止 Canvas 动画 setInterval

Stopping a Canvas Animation setInterval

javascript

ajax

canvas

web-worker