Stop procrastinating and take action before the JavaScript function concludes

Question

Stop procrastinating and take action before the JavaScript function concludes

Currently, I am experimenting with onkeydown events to capture the input value in a textarea, process it through a PHP file using Ajax post method, and display the result in an external div. However, the issue is that whenever a key is pressed, I am unable to continue typing until Ajax completes its task. Is there a way to allow uninterrupted typing even if the text has not been processed yet?

---UPDATE---

function fromWCtoHTML(source){
 var act = new Date();
 http[act] = createRequestObject();
 http[act].open('post', '/php/fromWCtoHTML.php',false);
 http[act].setRequestHeader('Content-Type','application/x-www-form-urlencoded',false);
 http[act].send("source=" + source);
 document.getElementById('AJAXWCtoHTML').innerHTML=http[act].responseText;
}

javascript ajax wait

Answer 1

Answer №1

Setting async to false has been done:

http[act].open('post', '/php/fromWCtoHTML.php',false);
                                               ^^^^^^

This results in blocking. Avoid this.

Remember, typing speed is usually faster than HTTP request/response time, so sending a request with every keystroke may not be ideal.

Answer 2

Setting async to false has been done:

http[act].open('post', '/php/fromWCtoHTML.php',false);
                                               ^^^^^^

This results in blocking. Avoid this.

Remember, typing speed is usually faster than HTTP request/response time, so sending a request with every keystroke may not be ideal.

Answer 3

Answer №2

http[act].open('post', '/php/fromWCtoHTML.php',false);

It seems that the third parameter [false] in the code above is making your request synchronous. To make it asynchronous, change it to true or simply omit it.

UPDATE: In response to a comment indicating that http[act].responseText is empty, try adding an onreadystate event handler using the following code:

function fromWCtoHTML(source){
 var act = new Date();
 http[act] = createRequestObject();
 http[act].open('post', '/php/fromWCtoHTML.php');
 http[act].setRequestHeader('Content-Type','application/x-www-form-urlencoded',false);
 http[act].send("source=" + source);
  http[act].onreadystatechange=function(){
 if (http[act].readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('AJAXWCtoHTML').innerHTML=http[act].responseText;
    }
}

Answer 4

http[act].open('post', '/php/fromWCtoHTML.php',false);

It seems that the third parameter [false] in the code above is making your request synchronous. To make it asynchronous, change it to true or simply omit it.

UPDATE: In response to a comment indicating that http[act].responseText is empty, try adding an onreadystate event handler using the following code:

function fromWCtoHTML(source){
 var act = new Date();
 http[act] = createRequestObject();
 http[act].open('post', '/php/fromWCtoHTML.php');
 http[act].setRequestHeader('Content-Type','application/x-www-form-urlencoded',false);
 http[act].send("source=" + source);
  http[act].onreadystatechange=function(){
 if (http[act].readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('AJAXWCtoHTML').innerHTML=http[act].responseText;
    }
}

Answer 5

Answer №3

To utilize the onreadystatechange-Event from XMLHttpRequest, simply place

document.getElementsByTagName('AJAXWCtoHTML').innerHTML=http[act].responseText;

within an unnamed function and designate the event-handler.

Answer 6

To utilize the onreadystatechange-Event from XMLHttpRequest, simply place

document.getElementsByTagName('AJAXWCtoHTML').innerHTML=http[act].responseText;

within an unnamed function and designate the event-handler.

Stop procrastinating and take action before the JavaScript function concludes

Answer №1

Answer №2

Answer №3

Similar questions

Creating responsive D3.js charts for various screen sizes and devices

What is the functionality of ng-repeat in AngularJS when used outside the "jump" table?

jQuery form validation with delay in error prompts

The repeated problem persists in Ajax where PHP is producing inaccurate results

Tips for navigating through pagination indexes with Angular 6

Instead of returning a single array of data from a form as expected, Jquery is returning two arrays

``The Vue.js routing system is determined by the incoming data received

Changing the class of a div in JavaScript from one class to another

The issue I am encountering is that the value from jQuery autocomplete is not getting transferred to the

What is the process for selectively adding interceptors to app.module?

Enhancing user experience by implementing dynamic text box functionality that triggers ajax load for dropdown options using a combination

Ways to verify the element prior to the completion of the request?

Using jQuery: When the API has loaded successfully, execute the specified function

Optimizing your approach to testing deferred always

In the jQuery Ajax function, what is the significance of the term "page" inside the "loadData(page)" function?

Is innerHTML incapable of executing JavaScript code?

"Dynamic Navigation: How to Utilize Ajax for Efficient

Harness the power of React Material-UI with pure javascript styling

``Can anyone provide guidance on extracting data from Xmlhttprequest POST request on my Nodejs express backend?"

Instructions on utilizing the signUp() function in Supabase for including extra user details during the registration process