CODEWITHSUNDEEP
javascript
Newbie
Newbie

Reputation: 2825

Is there any method to pause a function in the middle waiting for input in javascript?

I need to pause a JavaScript function execution in the middle and then resume it after a table cell is clicked. For example : I have to put 'A' into a one of the table cells. So, I have to click add() (add() is a function) and then wait for the user to click on the table cell to pass the cell id to function. I have thought of bind a click event to each cell to trigger the add() function. But then I have to do a delete function too. It is the same that I click on the delete button and then wait for the user to click on the table cell to pass the cell id to the function.

So how can I pause the function to wait for the input just like C++ : cin>>x which the program waits until user inputs the value of x.

Edited: Finally I work it out. Every time when I click on the add button, I bind a addtd function to every td. And after I click on the cell, I unbind the addtd function. So that next time I click on the delete button, I can bind a deltd function on each cell.

Upvotes: 0

Views: 219

Answers (2)

nnnnnn
nnnnnn

Reputation: 150040

There is no way to pause a function the way you describe. Have you thought about doing it the other way around? That is, when the user clicks a cell you can highlight it in some manner, and then Add and Delete buttons/functions will apply to the currently highlighted cell.

Alternatively you can do your add or delete "preprocessing" and then set some sort of flag to indicate that you're waiting for input, and then set an event handler for the cell click event that checks that flag to decide what processing comes next. So assuming you've setup your Add and Delete event handlers to call add() and delete(), and set your table cell click handler to call cellClick(), you could try something like this:

var clickCallback = null;

function add() {
   // do your preprocessing here
   clickCallback = function(clickedCell) {
      // do further processing here
   };
}

function delete() {
   // do your delete preprocessing here
   clickCallback = function(clickedCell) {
       // do further processing here
   };
}

function cellClick(e) {
    e = e || window.event;
    var clickedElement = e.srcElement || e.target;
    if (clickCallback != null) {
       clickCallback(clickedElement);
       clickCallback = null;
    }
}

After processing the click the callback is set back to null so that multiple clicks don't do anything. Obviously if some other action that the user takes should cancel the rest of the processing then just set the callback back to null then too.

Note that by defining the callback directly inside the add() and delete() functions they (the callbacks) will have access to local variables of add() and delete(), even though the callback isn't executed until later (the magic of closures).

Upvotes: 1

J. K.
J. K.

Reputation: 8368

I do not understand the problem completely. You cannot pause execution (without blocking the whole browser). You can only set up event listeners where you finish the work.

You can set up click event delegation to avoid binding click event listeners to each cell.

var textToAdd = 'A';

table.addEventListener('click', function (e) {
  var td = e.target;
  while (td !== this && td.tagName !== 'TD') { td = td.parentNode; }
  if (td.tagName !== 'TD') return;

  td.innerHTML += textToAdd;
});

Upvotes: 1

Related Questions