Stopping a Canvas Animation setInterval

Question

I have the following set up working very nicely... it's just that I can't stop it!

POST ANSWER EDIT: The issue was related to my organization of the draw functions, not related to the webWorker or the ajax call

The process:

1. 1 User clicks on button which calls a web worker
2. Web worker calls a .php page using AJAX on a setInterval timer
3. The web worker then processes and prepares the php data into a series of frames for animation and returns it to the main js
4. The main js then outputs a canvas animation using these frames with a setInterval draw function
5. Before the canvas animation finishes the web worker ajax setInterval has already triggered again, it contacts the php code, processes the data and more animation frames are returned to the canvas animations (pushed to end of animation array)
6. The canvas is still processing the animation frames
7. the web worker requests, processes and adds more frames to the canvas animation backlog
8. etc etc

However I would like to be able to stop this loop both the canvas animation and the web worker when a certain value is received .

(There is a reason they teach you to brake and stop first when you learn to ski or drive. I keep blocking my browser window trying variations on when to call the exit codes)

Here are what should be the relevant code parts, please ask for more info if relevant!

FIRST THE MAIN JS WORKINGS

$( 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 ; 
        });
});

HERE IS THE WEB WORKER workings, again please ask for more info if needed!

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);

So if a specific value is received in the canvas animation workings (here i used if animationData[nextFrame]==88, then it should stop both the canvas animation AND the web worker!!!

Answer 1

The main issue is with setTimeout and clearTimeout is that they are not used correctly. The code attempts to use a reference to the method to clear the interval whereas it should be a timer reference:

clearTimeout(draw);

Should be:

var timerRef;  // global or parent scope

function draw() {
    ...

    timerRef = setTimeut(draw, 300);
}

Then to clear it use:

clearTimeout(timerRef);