Is the performance of AJAX callbacks unacceptably slow?

After tinkering with AJAX, I managed to successfully implement a basic AJAX A-synced function. However, when attempting to switch it over to use a callback method, the loading time suddenly increases drastically (taking about 10-15 minutes...). Here's the initial function that works efficiently:

function ajaxf() {
var xmlhttp;
  xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200 && document.getElementById("icons")==null)
    {
    document.getElementById("text-12").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","http://some-url/ajax.php",true);
  xmlhttp.send();
} 

And here is the much slower version utilizing a callback function:

function ajaxf(url,cfunc) {

  xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=cfunc;
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
}
document.body.onscroll = function ajaxb() {
  ajaxf("http://some-url/ajax.php",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200 && document.getElementById("icons")==null)
    {
    document.getElementById("text-4").innerHTML=xmlhttp.responseText;
    }
  });
} 

Some other potentially relevant information - the ajax.php file is only 532 B in size, on my local test server both functions perform relatively similarly, and the first function uses onscroll="ajaxf()" within the body tag...

I had expected AJAX to be a bit more responsive. Any ideas why the slowdown occurs?

Answer №1

With the help of @jasen's tip, I was able to solve it by adding a console.log() to see the scroll function firing repeatedly as mentioned by @jfriend00. Initially, I believed that using "document.getElementById("icons")==null" as a condition would limit the function to execute only once, but I learned otherwise.

The actual solution turned out to be: resetting the onscroll action after the initial execution by including "document.body.onscroll = null;" at the end of the function.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Have Babel transpile configuration files into CommonJS format

I'm having trouble getting my Nuxt app to work with Jest for testing. I have a setupFilesAfterEnv property set with a setupTests.ts file that imports a translation file. The translations file uses ES6 import/export module syntax, but it seems like my ...

Refresh the user interface using AJAX triggered by a PHP call

I am currently working on a script that is responsible for sending out newsletters. The way it works is when the user clicks "send," an AJAX Request is sent to sendMail.php, which then takes the message and distributes it to all users listed in a database. ...

Struggling with updating an array using React's setState

My issue lies with setState not properly updating my todoItems array. After reviewing similar posts on this forum, I made changes to my addTodoItem() function by utilizing a function and the spread operator. While a new item is successfully added to the ar ...

How does Backbone.js tackle error handling when receiving messages from Rails?

Can anyone using backbone.js lend a hand? How can error messages from a rails app be encoded when integrating with backbone.js? For instance, how should flash messages like "record not found" be handled? While errors are usually defined on the client sid ...

Use ng-repeat to extract information from an array and populate it into a datalist

I've already tried searching for a solution to my issue on Google, but I couldn't find anything that really helped me. I'm looking to create an input field that also functions like a dropdown. This way, I can either type in my own data or se ...

What methods can be implemented to ensure uniform usage of a single library version among all developers?

Our team utilizes Angular and Visual Studio Code for development, while GitHub serves as our code repository. While this setup has been effective, we recently encountered an issue where one developer had a different version of a particular library. This di ...

Storing data in Angular service for future use

My ui-grid is functioning correctly, utilizing server side pagination with a view button to display row details on a separate page. However, upon returning to the grid after viewing details, it defaults back to displaying the first page. I would like it to ...

Automatically execute a function when the number input changes, but only if no further changes are detected after a certain period of time

I am implementing angularjs with an input field for numbers. I want to trigger an action automatically after a certain amount of time, but only if no further changes have been made to the number within that time frame (let's say 2 seconds). In my exa ...

including a "continue" option to the jplayer interface

Does anyone know how to add a next button on jplayer? I've tried using the click function, but it doesn't seem to be working. The player is set up to use ajax to fetch songs and information about them. When one song ends, another is retrieved th ...

Tips for retrieving a variable from an XML file with saxonjs and nodejs

I came across an xml file with the following structure: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE agent SYSTEM "http://www.someUrl.com"> <myData> <service> <description>Description</description> < ...

What steps should I take to address the issue with the map function in ReactJS?

While working on fetching and passing data to other components through props, I encountered an issue in one of the child components where I am unable to use the map() function. The error message "Cannot read properties of undefined (reading 'map' ...

Using simple_form_for to update a specific section of the content using ajax technology

One challenge I am facing involves a form that calls a partial: # form.html.haml = simple_form_for(resource) do |form| = form.input :foo = render partial :some_fields, locals: { form: form } # _some_fields.html.haml = form.input :bar The issue arise ...

Tips for displaying a message when clicking on the second level in fancytree.js

I'm looking to use fancytree.js to display an alert message only when clicking on nodes in the second level. For example: <ul> <li>1</li> <ul> <li>1.1</li> ...

Can you provide a basic illustration of how routes are implemented in AngularJS?

After searching through numerous examples of using Routes with Angular, I have unfortunately not been able to find a working solution. Even the example provided in the official guide did not work properly (clicking on it resulted in a wrong URL that did no ...

Is there a way to decode/compile/interpret the data within nested HTML tags within my AngularJS directives?

How can I process/compile/resolve the contents of enclosed HTML in my directives. The specific directive being discussed is: angular.module('transclude', []) .directive('heading', function(){ return { restrict: 'E&apos ...

Traversing through objects in react.js

Hello there, I'm currently learning React and JavaScript but facing some challenges with a particular task. Let's dive into it! So, imagine I have an array like this: clients = ["Alex", "Jimmy"] and then I proceed to create another array using th ...

Choosing between Ajax.ActionLink and combining Html.ActionLink with a Jquery.Ajax call

One way to call an asp.net mvc controller is through Ajax.ActionLink("Get customers","GetCustomers","Customer"); Another method involves using Html.ActionLink and a jQuery ajax call. What sets these two approaches apart? ...

What is the best way to enable import and require support for npm modules?

Recently, I successfully published my debut module on npm using Javascript. Now, I am eager to ensure that it can support both import and require functions. Can someone guide me on how to achieve this? For reference, the module in question is available at ...

Error: Controller not found when angular.module is called from different files

As I am restructuring my code to make it more modular, I decided to move the controller into a separate file that belongs to the same module. However, I am facing an issue where the controller does not load, even though I have verified that the load order ...

Exploring the functionality of JavaScript's concat method

I am trying to retrieve value1, value2, value3... but I am encountering an issue. Why am I getting this error message - "can't access property "concat", texto1 is undefined"? Please assist me! Here is the HTML code snippet: <div id=ite ...