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. web worker 请求、处理并向 Canvas 动画积压添加更多帧
8. 等等等等

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

(当你学习滑雪或开车时，他们教你先刹车和 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 动画工作中接收到特定值(这里我使用了 if animationData[nextFrame]==88，那么它应该停止 Canvas 动画和网络 worker !!!

Answer 1

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

clearTimeout(draw);

应该是:

var timerRef;  // global or parent scope

function draw() {
    ...

    timerRef = setTimeut(draw, 300);
}

然后清除它使用:

clearTimeout(timerRef);