The update feature activates upon reaching the bottom of the page, but it continues to refresh constantly

In my VueJS component, I have implemented a scroll event that triggers an AJAX call to update the Jobs() function when the user is getting close to the end of the page.

if ( windowScrollTop >= (documentHeight - windowHeight - 50) )
{
        this.updateJobs();
}

Everything seems to be working fine as the jobs are updated and displayed. However, there's one issue - the updates don't stop and keep loading until all pages of data are fetched.

I expected the updating process to halt after the first round since the condition in the if statement would no longer be met. But apparently, the scroll event continues triggering without taking into account the new position and height values with the additional data included.

Is it a good idea to use setTimeout to allow time for rendering? Or should I explore other alternatives for managing this repetitive update behavior?

javascriptdesign-patternsvue.jsvuejs2

Answer №1

The reason for this occurrence is due to the usage of 

windowScrollTop >= (documentHeight - windowHeight - 50)
, indicating that windowScrollTop has a likelihood of exceeding or equalling the last 50 pixels of the page height.

Hence, it is advisable to incorporate an additional condition check as well.

var scrollUpdateFired = false;
if ( windowScrollTop >= (documentHeight - windowHeight - 50) && !scrollUpdateFired)
{
        scrollUpdateFired = true;
        this.updateJobs();
}

Subsequently, within your ajax's promise success callback function, ensure to reset the value of scrollUpdateFired back to 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

Loading a Vuetify component dynamically within a Vue 3 environment

In my Vue 3 project, I am attempting to dynamically load Vuetify components using the code below: <template> <v-chip>try</v-chip> <component :is="object.tag">{{ object.content }}</component> </template> & ...

javascriptvue.jsvue-componentvuetify.jsvuejs3

Is it possible to utilize JSX independently of React for embedding HTML within a script?

Is it possible to incorporate inline HTML within a script using a library such as jsx? <script src="jsx-transform.js"></script> <script type="text/jsx"> define('component', function () { return (<div>test html code< ...

javascriptreactjs

Could it be that express-session is not compatible with express 4.13?

I have followed the setup instructions for express-session as outlined in the documentation, but it seems that my cookie is not being created. According to the documentation, simply setting the request.session value should automatically set the cookie. How ...

javascriptnode.jsexpressauthenticationexpress-session

Is it possible to create a development build using Npm with React and Typescript?

I have successfully set up a TypeScript React app by using the command below: npx create-react-app my-app --template typescript However, running "npm start" generates development javascript files and launches a development server which is not id ...

javascriptreactjstypescriptnpm

Unusual jQuery error notification

Short Receiving Error in syntax, unrecognized expression: [object Object] @ jquery.js:4267 This code snippet is from jQ: Sizzle.error = function( msg ) { throw new Error( "Error in syntax, unrecognized expression: " + msg ); // Line 4267 }; Detaile ...

javascriptjqueryarraysjsonconsole

Generating fresh objects to establish a Many-to-Many connection with Sequelize

I am currently utilizing NodeJS, Express, Sequelize, and PostgreSQL in my project. Within my application, I have defined two models: a "User" model and a "Social" model. My goal is to establish a many-to-many relationship where a user can be associated wi ...

javascriptnode.jspostgresqlexpresssequelize.js

Execute a jQuery ajax request to a specific variable

For my Phonegap/Cordova project, I have implemented functions to handle all ajax calls in the following way: function requestData(action, id ) { var data = { user_id: localStorage.getItem('user_id') }; if( action == 'fee ...

javascriptjqueryajaxcordova

Passing a JSON object from a Rails controller to Javascript

After creating a hash structure in Ruby like this: Track_list = {:track1=>{:url=>"https://open.spotify.com/track/2Oehrcv4Kov0SuIgWyQY9e", :name=>"Demons"}, :track2=>{:url=>"https://open.spotify.com/track/0z8yrlXSjnI29Rv30RssNI", :name=> ...

javascriptruby-on-railsjsonspotify

Preserve the data integrity through two consecutive jsp pages

My task involves extracting a value from a table: <script type="text/javascript"> var activeRequest; $(document).ready(function(){ $(".i_search").on("click", function(event){ event.preventDefault(); acti ...

javascriptjqueryajaxjsp

Booting up the node.js environment with the help of a C++ application

Is it possible to start Node.js from a C++ application? The reason I ask is because I have a C++ console application that launches a JavaScript application which uses require('os'). However, it is failing with the error "Uncaught ReferenceError: ...

javascriptc++node.js

Utilizing an Ajax call within "for" loops can result in skipping either odd or even iterations

Seeking assistance because we are facing a challenge that we cannot seem to overcome. Despite researching on platforms like StackOverflow and search engines, implementing a solution or solving the problem remains elusive. The goal is to develop a JavaScri ...

javascriptjqueryajaxasynchronouscallback

Canvas with a button placed on top

I am working with a canvas and trying to position an HTML element over it using CSS. My goal is for the button to remain in place on the canvas even when resizing the entire page. Here is the code I am currently using. https://jsfiddle.net/z4fhrhLc/ #but ...

javascripthtmlcss

Angular 12: How to detect when a browser tab is closing and implement a confirmation dialog with MatDialog

I have a scenario where I am checking if the browser tab is closed using the code below. It currently works with windows dialog, but I would like to incorporate MatDialog for confirmation instead. @HostListener('window:beforeunload', ['$eve ...

javascriptangulartypescriptangular-materialangular-routing

When using Vue.js, it is not possible to quote variables in HTML element attributes

Below is the provided code snippet: <tr v-for="(item, index) in detail" :key="item.name" class="[[ item.name ]]"> <td>[[ index + 1 ]]</td> <td>[[ item.name ]]</td> The resulting HTML output i ...

vue.js

What is the best way to apply identical properties to multiple components at once?

With multiple components like <my-a>, <my-b>, and many more each having a prop: { props: { isDetail: { type: Boolean, default: false, } }, } When creating a form using these components, repeating the prop assignment becom ...

vue.jsvuex

Angular: When $scope variable is modified, a blank page issue arises

In my Angular application, I have a template called viewAll.html that is displayed after clicking on a link. This template fetches data via AJAX using scope variables. However, I encountered an issue where updating these scope variables through AJAX cause ...

javascriptangularjsajax

What is the best way to create a smooth sliding effect using CSS?

Need help with creating a transition effect within a bordered div that reveals hidden content when a button is clicked? I'm looking to have the <a> tag displayed after clicking the button, with both the button and text sliding to the left. Here& ...

javascripthtmlcss

ReactJS state not being updated due to a nested Axios call

Attempting to fetch data from nested axios calls, successfully retrieving responses from both calls. Struggling to update the prize_pool value within the second axios call. Any assistance would be greatly appreciated. getAllLeague() { axios.get(BA ...

javascriptajaxreactjsasynchronousaxios

Issues with AngularJS functionality have been noticed in Chrome browsers on both Mac and Windows platforms, with Safari being

As I begin my journey into learning AngularJS, I encountered an unusual issue. The code snippet below is taken from an online tutorial on Github. Interestingly, the code functions flawlessly on Safari (MAC) but fails to load on Chrome. The same problem p ...

javascriptangularjsjsonmacosgoogle-chrome

Is it possible to manually input values when printing a PDF instead of pulling them from the main HTML?

I am facing a challenge in adding a "Print PDF" option to my website because it is built using Ext.js, and therefore the code is not in HTML. Despite searching for ways to print a PDF from the site, all solutions I found involve using HTML. Is there any li ...

javascriptpdfextjspdf-generation