Wait for an event to appear inside a function in Javascript for Skulpt
I want to change Sk.inputfun()
for Skulpt to enter the user in <textarea>
and click ENTER
to submit. I need to pass one Skulpt function that receives user input, however I cannot find a way to do this other than prompt()
. My question is similar to the following, however there is no answer.
Skulpt Assign Sk.inputfun () to input the response to output when the input () method is called
The only way I could think of doing this is to defer the return with setTimeout()
until the event fires the enter button and changes the flag.
var enterPressed = false;
$("#output").keyup(function(e){
if((e.keyCode || e.which) == 13) { //Enter keycode
enterPressed = true;
}
});
and then wait for the change I had:
Sk.configure({
inputfun: function (prompt) {
function checkFlag() {
if(enterPressed) {
enterPressed = false
return $('#output').val();
} else {
window.setTimeout(checkFlag, 100);
}
}
return checkFlag();
},
inputfunTakesPrompt: true,
output: outf,
read: builtinRead
});
However, this does not work for several reasons. a) The timeout function cannot return a value, and b) The timeout cannot even delay the return function and it simply does not return anything.
I also tried using .done()
but couldn't get it to work.
There seems to be no way to do this that I could find on the internet, any help would be much appreciated!
source to share
You need to return a Promise from your inputfun, which is then resolved when the return is clicked. (If you are not familiar with Promises, they are worth looking at - <grossSimplification> they allow you to write asynchronous code using synchronous logic </grossSimplification>).
Something like this (using your code as a base):
Sk.configure({
inputfun: function () {
// the function returns a promise to give a result back later...
return new Promise(function(resolve,reject){
$("#input").on("keyup",function(e){
if (e.keyCode == 13)
{
// remove keyup handler from #output
$("#input").off("keyup");
// resolve the promise with the value of the input field
resolve($("#input").val());
}
})
})
},
output: outf,
read: builtinRead
});
I assumed the input element with the input id takes stdin. Looking at your OP, you were talking about a textbox (although JQuery.val () should work fine on that). Based on what you called your textarea ("output"), it appears that you intend to use both stdin and stdout to share the textarea. If so, I'm not sure how you will be able to distinguish between what was generated by stdin and what was (subsequently) entered by the user. Thus, the above code assumes a separate input field.
I had a similar use case and the way I represented the illusion of an integrated console for stdin and stdout was to have a span with contenteditable at the end of my output div. On keycode == 13, before I resolved the promise and sent back what the user typed, I took out the text from the input range and added it to the output div.
source to share