The Ajax Process continues to run even after the user has navigated away from the page

Currently, I have a JavaScript function that refreshes a specific section of a Rails-generated view every 2.5 seconds using a JS request to update a basic progress bar.

function refreshPage(){
  $.ajax({
      type:"GET",
      dataType:"script"
  })
}

setInterval(function(){
    refreshPage();
}, 2500);

However, the refreshing process continues even after the user has navigated away from the page. This issue persists in both Development and Production environments. The only solution is for the user to visit another page and manually refresh by pressing F5.

I suspect there may be a simple solution that I am overlooking. Should I implement a method to determine when the progress bar is complete so that I can stop sending JS requests?

javascriptruby-on-railsajax

Answer №1

To properly stop a timer that was initiated with setInterval(), it is recommended to use clearInterval(intervalID) as outlined here in the documentation.

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

What sets apart the <script> tag with a type attribute from the standard <script> tag in HTML?

Similar Question: Is it necessary to include type=“text/javascript” in SCRIPT tags? While working on my HTML project, I noticed that the JavaScript code within script tags is evaluated even if the type attribute is not explicitly set to "j ...

javascripthtml

Leveraging IPFS to host a CSS stylesheet

I've been trying to load a css stylesheet using this link... I attempted adding the link tag to both the main and head tags. <link type="text/css" rel="stylesheet" href="https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9sk ...

javascripthtmlcssipfs

Can webpack integrate React components from a package and then recompile the package?

I am currently in the process of creating an npm package to standardize my layout components that are based on geist components. Initially, I attempted to use the npm package as a local component, but encountered a webpack loader error when trying to read ...

javascriptreactjsnpmwebpackjsx

Using async/await with Axios to send data in Vue.js results in different data being sent compared to using Postman

I am encountering an issue while trying to create data using Vue.js. The backend seems unable to read the data properly and just sends "undefined" to the database. However, when I try to create data using Postman, the backend is able to read the data witho ...

javascriptnode.jsvue.jsasync-awaitaxios

Stop jQuery from adding duplicate values to a table

When I make an AJAX call using jQuery and PHP to receive JSON response, I am encountering a problem with duplicate values. The code is functioning correctly, but when selecting an option from the drop-down list, duplicate entries appear. The scenario invol ...

javascriptphpjqueryjsonajax

Develop an XML document with the use of either Javascript or PHP

I have an XML file that contains information about bracelets with photo details. <bracelets> <photo filename="b1.jpg" thumbnail="a1.jpg" description="aa" /> <photo filename="b2.jpg" thumbnail="a2.jpg" description="aa" /> & ...

javascriptphpxmldom

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

phpjavascripthtml

The specified variable will not be visible in the window object

I recently created a JavaScript code snippet that looks like this: let var1 = 1; window.var2 = 2; After running the code in the Chrome console, I entered window to inspect the global window object. Surprisingly, only the second variable appeared and the ...

javascript

React components need to refresh after fetching data from an API

I am currently working on a React application using TypeScript and integrating JSONPlaceholder for simulating API calls. I have successfully set up everything I need, but I am encountering an issue with re-rendering components that display response data fr ...

javascriptreactjstypescript

"Displaying an array using React Hooks' useState causes the content to

I want to enhance my image uploading functionality in useState by implementing a specific function. Once the images are uploaded, I need to render them on the page. However, I am facing an issue with rendering the returned array. Here is the current code ...

javascriptarraysreactjsreact-hooks

Endless AngularJS loop using ng-view

I recently started experimenting with AngularJS for a new project I am working on, but I have encountered a problem when dealing with routes and views. For the sake of simplicity, I have minimized this example to its basic form, yet the issue persists. Th ...

javascriptangularjsinfinite-loop

When using a variable to fetch data in JSON, an undefined error occurs. However, if a hardcoded index

I am facing an issue while trying to extract and manipulate JSON data from a file for an application I am developing. When looping through the data, I encounter an undefined error that seems to indicate a missing property in the JSON object when accessing ...

javascriptjson

Checking the response from an AJAX call with an if/else statement

Is there a way to create a counter for unread messages using PHP and jQuery? Below is the PHP code in BubbleStat.php: $totalMsg = $mysql->totalRows("SELECT msg_id from messages WHERE msg_opened = 0 AND msg_receiver = '".$_SESSION["ActiveUserSessio ...

phpjavascriptjqueryajax

Dynamic reloading of a div with form data using jQuery's AJAX functionality

I am currently developing an online visitor chat software using PHP and MySQL. My goal is to load the page when the submit button is clicked. Submit Button ID: send Visitor ID: vid Chat ID: cid Below is the snippet of code for an Ajax request that I hav ...

javascriptphpjqueryhtmlajax

Customize Django to assign a value for ajax requests across all template files

My website utilizes ajax content loading for page contents. In every page, I have a check to see if the request is ajax or not: if request.is_ajax(): return render(request, 'home.html', {'posts': posts, ...

pythonajaxdjangodjango-templates

Achieving proper functionality of additional directives within uib-tab components

How can I utilize a callback function for uib-tab directives to refresh inner directives after tab rendering? I'm troubleshooting an issue with a third-party directive when used within the uib-tab directive from angular-bootstrap. The specific direct ...

javascriptangularjsangularjs-bootstrap

Is there a way to remove text from a div when the div width is reduced to 0?

Upon loading the page, my menu is initially set to a width of 0px. When an icon is clicked, a jQuery script smoothly animates the menu's width to fill the entire viewport, displaying all menu items (links) perfectly. The issue I'm facing is that ...

javascriptjqueryhtmlcss

Is there a way to generate a distinctive curved design using CSS for a

I am currently using CSS and div elements in an attempt to create these particular lines: https://i.stack.imgur.com/Ytowq.png .line { width: 1px; height: 100px; background-color: black; position: absolute; border-radius: 50%/100px 1 ...

javascripthtmlcss

Using the JSON parameter in C# with MVC 3

I'm facing an issue with sending JSON data from a JavaScript function to a C# method using Ajax. When I receive the data in C#, it's not being recognized as JSON. How can I resolve this issue? If I try to output the received data using Response.W ...

c#javascriptajaxjsonasp.net-mvc-3

Navigating files using NodeJS and ExpressJS

Can NodeJS (or ExpressJS) facilitate the following task? Although I appreciate the flexibility that routing provides, I find the configuration process quite cumbersome. (I don't consider myself an expert in Express) For instance, imagine an applicat ...

javascriptnode.jsexpress