I need to modify some legacy javascript code. There's a place where I want to wait until the user presses one of two buttons and then continue with the program flow (like prompt()
function). How can this be achieved ?
views:
132answers:
5- You can hide the content that may not be visible (using CSS display:none) and show it when you press a button.
- Or more secure: You can do a server/AJAX request when a button has been pressed
There is no "sleep" or "wait" operator in JavaScript. You can set a timer, though, and when the timer expires, it will execute a function.
setTimeout("alert('hello')",1250);
You have to use the events to flag the key:
<script type="text/javascript">
document.onkeyup = KeyCheck;
function KeyCheck()
{
var KeyID = event.keyCode;
switch(KeyID)
{
case 16:
document.Form1.KeyName.value = "Shift";
break;
case 17:
document.Form1.KeyName.value = "Ctrl";
break;
case 18:
document.Form1.KeyName.value = "Alt";
break;
case 19:
document.Form1.KeyName.value = "Pause";
break;
case 37:
document.Form1.KeyName.value = "Arrow Left";
break;
case 38:
document.Form1.KeyName.value = "Arrow Up";
break;
case 39:
document.Form1.KeyName.value = "Arrow Right";
break;
case 40:
document.Form1.KeyName.value = "Arrow Down";
break;
}
}
</script>
You need to break your function at that point, and add another function to catch the user's button press event.
You can use Narrative Javascript to introduce blocking behavior and simply it (so you don't need to break up your function into two part.)
Ok, probably you wanted this kind of thing, you can implement the events to flag the key from Pentium10's answer:
You can make a function called for example waitForIt() in which you set a setTimeout() function that calls the same method until a global variable is true (set by you press button action).
For example:
<html>
<head>
<script type="text/javascript">
var buttonpressed = false;
function waitForIt() {
if (!buttonpressed ) {
setTimeout(waitForIt,2500);
} else {
document.getElementById('info').value='ok';
}
}
function startSomething() {
document.getElementById('info').value='';
waitForIt();
document.getElementById('info').value='waiting';
}
function setButtonPressed() {
buttonpressed = true;
}
</script>
</head>
<body>
<br>
<input type='text' style="width: 200px;" id="info" />
<br>
<input type='button' style="width: 200px;" value="Start" onclick="javascript: startSomething();">
<br>
<br>
<input type='button' style="width: 200px;" value="Continue" onclick="javascript: setButtonPressed();">
</body>
</html>
You could call the waitForIt() method directly but i made it so you can view what is happening. Sorry for the mess in the example but i don't have much time to spare :)
I wouldn't play with timeouts and intervals for that.
You'd be better off cutting the program in 2 parts, may be as you suggest in 2 functions.
Run the first part, add the code to ask the user for action.
And then based on the action, run the second part.