Unpredictable results in setTimeout function when Chrome DevTools are closed

My goal is to create a simple debounce function for searching employees. I've noticed that with Chrome DevTools open, the search results consistently come back from the server. However, when Chrome DevTools are closed, there are instances where the breakpoint in the search method on the server isn't hit, indicating that the AJAX call may not be made for some reason.

Unfortunately, the codepen below does not include the part that actually returns the search results.

https://codepen.io/jgunawan-dc/pen/vYLZbEY

new Vue({
 el: '#app',
 vuetify: new Vuetify(),
 data: {
  searchInput: null,
  selectedEmployees: null,
  isSearchingEmployee: false,
  items: [],
 },
 methods: {
  searchEmployees: function (searchInput) {
    // cancel pending call
    clearTimeout(this._timerId);

    this.isSearchingEmployee = true;

    // delay new call 1 second
    this._timerId = setTimeout(() => {
      let _this = this,
        url = 'some_url' + '?phrase=' + searchInput;
      url = encodeURI(url);

      $.ajax({
        type: 'GET',
        url: url,         
        success: function (result) {                                              
          _this.items.splice(0);
          _this.items.push(...result);
        },
         complete: function (xhr) {
          _this.isSearchingEmployee = false;
        }
      });                    
    }, 1000);
  }
},
watch: {
  'searchInput': function (newVal) {
    this.searchEmployees(newVal);
   }
  }
})

Answer №1

When it comes to GET requests, the intention is for them to be cached in order to enhance your browsing speed. This means that your browser doesn't need to continuously contact the server because it already has the necessary data stored.

If you notice persistent calls to the server despite this, it could be due to a setting in DevTools that prevents caching of requests. Double check if this option is enabled in your settings.

https://i.sstatic.net/sMeDe.png

Having static data on the server can actually benefit the user experience by speeding up response times. However, if you prefer not to have these requests cached, make sure to configure the appropriate headers on the server or adjust the cache settings within JQuery Ajax.

$.ajax({
  type: 'GET',
  url: url,
  cache: false,
...
})

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

Using Ajax to fetch and display HTML and PHP pages

After successfully implementing an ajax function to load html pages inside an ajax-container div in my index.php, I am now wondering how I can also call php pages using ajax. Here is the code snippet that I currently have: htaccess rewrite Options +Fol ...

Customize div styles according to the website domain

I want to dynamically change the header of my website based on whether it is in dev QA or production environment. Below is the HTML code: <div id="wrapper"> <form id="form1" runat="server"> <div class="wrapper"> <div> ...

How to extract the HTML content from specific text nodes using Javascript

I have a piece of HTML that looks like this: <div id="editable_phrase"> <span data-id="42">My</span> <span data-id="43">very</span> <span data-id="1">first</span> <span data-id="21">phrase< ...

Learn the process of concealing previous markers on a Google Map in JavaScript API when new markers are added

I have implemented a store locator feature using the Google Maps JavaScript API. When users enter their location, they can see all stores within a 50km radius. I am looking to remove the previous marker when a user performs a new search. Currently, there a ...

The error message "TypeError: task is not a function" is being

I encountered an issue while attempting to make a post request from Postman using the URL localhost:3000/todos. The request resulted in a 500 internal server error, and I also received an error stating that 'todo' is not a function. Here is the c ...

jQuery Algorithm for calculating totals

Here is an algorithm for formatting amounts using jQuery: Visit jsfiddle for the code However, there are some issues. For instance, if I enter 900.800,00 and then delete the "9", it still displays 00.800,00. How can this be resolved? I have fixed severa ...

How come I am unable to retrieve it as an object (abonnes) using the GetElementById method from the result?

Why am I not able to retrieve 'abonnes' as an object from the result of GetElementById? The element is available in JSON format. function Abonnes() { const [abonnes, setAbonnes] = useState(); const getOneAbonnes = (id) => { Axios.get( ...

Performance Issues Arise with Rapid Clicking [jQuery]

Having trouble with a gallery script I created that includes thumbnails, a large image, and navigation arrows. When you rapidly click on thumbnails or arrows during the transition, it causes delays in the process. The more clicks you make, the more noticea ...

Run a .jar file within Spoon (Pentaho Kettle)

I am trying to run a java jar file from Spoon. The jar file contains a single class named "Limpieza" within the package com.overflow.csv.clean. I would like to be able to execute this class with or without parameters. I have placed the jar file in the d ...

The impact of a variable in a function with XMLHttpRequest

How does the XMLHttpReqeust variable impact the functionality of the following code snippets? function getHTTPObject() { if (typeof XMLHttpRequest == "undefined") { XMLHttpRequest = function () { try { return new Ac ...

Is TinyMCE creating unexpected <g> tags?

When I save content in the TinyMCE WYSIWYG editor, I notice that the HTML tag below keeps appearing throughout the text: <g class="gr_ gr_283 gr-alert gr_spell gr_run_anim gr_inline_cards ContextualSpelling ins-del multiReplace" id="283" data-gr-id="28 ...

Steps for adding a React Class Component into a Modal that is not within the React Tree

Our project is built using PHP MVC Framework and we initially used jQuery as our main JavaScript framework for handling UI activities. However, we have now transitioned to using React.js. My query is about how to inject or append a React Functional/Class-b ...

Attempting to transfer a JSON object from a frontend Form Input to an Express backend

Apologies for bringing up what may seem like a basic issue, but I've been searching extensively (even through axios' documentation) and haven't been able to pinpoint exactly what I need to resolve this issue. I have created a simple To-Do we ...

Nodejs Websocket integration with the Firefox browser

Currently, I am utilizing Aurora 17 along with Chrome 22 and Firefox 16 in order to develop a basic chat application. My server-side technology is Node 0.8.9. The issue I am experiencing pertains specifically to Firefox, as it fails to establish a connect ...

The functionality of Angular services is not available for use in Jasmine tests

As someone who is relatively new to Jasmine Testing and the Angular framework, I find myself in a unique situation. I am currently struggling with referencing my service functions in my Jasmine tests. Here is a snippet of my Angular Service Initialization ...

Unending cycle in React with a custom hook

After attempting to create a method using a custom react hook to streamline state logic across multiple components, I encountered an invariant violation labeled "prevent infinite loop". function useCounter(initial) { const [count, setCounter] = useState ...

What could be causing my Bootstrap datepicker to malfunction?

A while ago, my Bootstrap datetimepicker component was functioning perfectly in my code. However, it has suddenly stopped working and I am seeking assistance to get it running smoothly again. Below is the HTML code snippet: <script src="https://cd ...

How to automatically scroll to the bottom using jquery/css

I've recently developed a chatroom using li elements, but I'm encountering an issue where the chat doesn't stick to the bottom once it reaches a certain number of messages. I suspect it has something to do with the height settings, but I can ...

CSS/SCSS/JS: Adjusting header height dynamically while keeping it fixed at the

Check out my Codepen demo here: https://codepen.io/nickfindley/pen/dJqMQW I am seeking to replicate the current behavior of the page without specifying a fixed height for the header. The goal is to make the header adjust dynamically based on the content, ...

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

I am trying to make a URL call from JavaScript with a single parameter, and the URL should respond to that specific request. Here is an example of the response format: {"success":true, "result": {"token":"4fc5ef2bd77a3","serverTime":1338371883,"expireT ...