Pausing javascript until next click?

A function which does something based on where the user clicks on a canvas has been made. However, at the end of this function, I need to check to see if the next spot is in a specific location. I need to pause the function, wait for the next click, then depending on the location of the next click, I need to display one of the two alerts.

Basically, I am wondering if there is a way to pause the current function and prevent it from continuing until the user clicks again inside the canvas. I should be able to easily continue from there.

Thanks!

if (leftSpot || rightSpot){
    //wait for click
        if (clicked in specific spot)
            alert("clicked yellow,submit form");
        else{
            alert("no click,nosubmit, reset");
            canvas.width = canvas.width;
            Squares();
            fill();
            }
    }

My original on click detection:

/*  relative coordinate finding functions from     http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ ,modifications made     */

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
  var canvas = document.getElementById('checkersGame');
  var context = canvas.getContext('2d');

  canvas.addEventListener('click', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    locationFinding(mousePos.x, mousePos.y);
  }, false);

/*  END of relative coordinate finding functions from http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ ,modifications made */

Answers


Use a flag variable to stop listening for click events until locationFinding has completed.

var pauseListening=false;

canvas.addEventListener('click', function(evt) {


  if(!pauseListening){

      pauseListening=true;

      var mousePos = getMousePos(canvas, evt);

      locationFinding(mousePos.x, mousePos.y);

      pauseListening=false;

  }

}, false);

Easiest way is to use an event listener. You can do something like this:

if (leftSpot || rightSpot){
    document.getElementById("elementID").onclick = function() {
        // continue your code here
     };
}

Need Your Help

Zend Framework 2 - InputFilter add InputFilter

zend-framework2 zend-form2 zend-inputfilter input-filter

i have written some InputFilters. Now i wanne filter and validate a form with a couple of them. So i thought i can write a new InputFilter add all other i need in constructer and set this new one t...

iOS official to-do tutorial: List View Controller does not display correctly

ios iphone objective-c xcode

I've been trying to learn iOS app development and i started from the official tutorial of Apple from this link: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/RoadMapiOS/