Prevent callback function execution in JavaScript

Question

Prevent callback function execution in JavaScript

Users have the ability to select a month by clicking +1 month or -1 month.

Each click triggers a loop based on the number of days in the chosen month.
Within the loop, a function is called to fetch data through an $http request.

The issue at hand is as follows: (for example)
-When the page loads: var data = [];

-Time 1: User clicks on January:
31 $http requests are made, resulting in 15 callbacks.
data.length = 15;

Time 2: User clicks on February.
The variable is reset with var data = []
15 callbacks from the previous month carry over, in addition to 30 callbacks from February.

I am looking for a solution to halt callbacks when the user switches to another month...

For a clearer demonstration, check out this basic Fiddle:
http://jsfiddle.net/36qp9ekL/318/

javascript angularjs

Answer 1

Answer №1

My apologies for the confusion earlier with the incorrect code...

It seems that your requests are not being processed as quickly as expected. Due to the asynchronous nature of Angular, when you rapidly click the next() and previous() functions, they end up overlapping. This causes the "rest" from previous days to be returned before moving on to the next days of the month. To address this issue, consider implementing promises or restructuring your program logic.

Additionally, make sure to include $q for injection.

Here is an example using promises:

$scope.next = function(){
    date.setDate(date.getDate() + 1);
    $scope.data = [];
    // disable previous and next button
    $scope.loadData().then(function(allDayRequestResults) {
        $scope.data = allDayRequestResults;
        // enable previous and next button
    }).catch(function(error) {
        // handle http request error here
    });
};

$scope.loadData = function(){
    var promises = [];
    for(var i = 1; i <= daysInMonth(); i++){
        promises.push(getData(i));
    }
    return $q.all(promises);
};

function getData(i){
    var deferred = $q.defer();

    $http(<yourHttpOptions>)
        .success(function(result) {
            deferred.resolve(result);
        })
        .error(function (data, status, headers, config) {
            console.log('$http-error:' + data + status + headers + config);
            deferred.reject('Error occured while retrieving day '+ i);
        });

    return deferred.promise;
}

This solution has not been thoroughly tested yet...

Answer 2

My apologies for the confusion earlier with the incorrect code...

It seems that your requests are not being processed as quickly as expected. Due to the asynchronous nature of Angular, when you rapidly click the next() and previous() functions, they end up overlapping. This causes the "rest" from previous days to be returned before moving on to the next days of the month. To address this issue, consider implementing promises or restructuring your program logic.

Additionally, make sure to include $q for injection.

Here is an example using promises:

$scope.next = function(){
    date.setDate(date.getDate() + 1);
    $scope.data = [];
    // disable previous and next button
    $scope.loadData().then(function(allDayRequestResults) {
        $scope.data = allDayRequestResults;
        // enable previous and next button
    }).catch(function(error) {
        // handle http request error here
    });
};

$scope.loadData = function(){
    var promises = [];
    for(var i = 1; i <= daysInMonth(); i++){
        promises.push(getData(i));
    }
    return $q.all(promises);
};

function getData(i){
    var deferred = $q.defer();

    $http(<yourHttpOptions>)
        .success(function(result) {
            deferred.resolve(result);
        })
        .error(function (data, status, headers, config) {
            console.log('$http-error:' + data + status + headers + config);
            deferred.reject('Error occured while retrieving day '+ i);
        });

    return deferred.promise;
}

This solution has not been thoroughly tested yet...

Answer 3

Answer №2

While I agree that requesting 1 callback with a response time of 30 days may be a better solution, I believe that this approach could also be useful for other applications.

Although untested, this code provides a potential way forward. I have opted for global variables as a solution because promises may not work across all browsers.

<button ng-click="load()"> Load data 1,000 times </button>

<script>

var callback = true;
var count = 0;

function ajaxRequest(i){

   // AJAX REQUEST
   .success(function(){

       count++;
       if(count == 1000){
         callback = true;
         count = 0;
       }
    });


}

$scope.load = function(){

   if(callback){
     callback = false;

     for(var i = 0; i < 1001; i++){
        ajaxRequest(i);
     }

   }

}
</script>

Answer 4

While I agree that requesting 1 callback with a response time of 30 days may be a better solution, I believe that this approach could also be useful for other applications.

Although untested, this code provides a potential way forward. I have opted for global variables as a solution because promises may not work across all browsers.

<button ng-click="load()"> Load data 1,000 times </button>

<script>

var callback = true;
var count = 0;

function ajaxRequest(i){

   // AJAX REQUEST
   .success(function(){

       count++;
       if(count == 1000){
         callback = true;
         count = 0;
       }
    });


}

$scope.load = function(){

   if(callback){
     callback = false;

     for(var i = 0; i < 1001; i++){
        ajaxRequest(i);
     }

   }

}
</script>

Prevent callback function execution in JavaScript

Answer №1

Answer №2

Similar questions

loop through nested arrays

Disable the swipe feature on a Bootstrap carousel to prevent users from navigating through slides on mobile devices. The attribute data-touch="

Load pictures featuring a designated title

Summing Values with Linq.js Filter

Tips for presenting JSON date in JavaScript using Google Chart

Utilizing the ng-controller directive from AngularJS within the class attribute

Bot is being inundated with messages containing no content

Creating a number of arrays based on the row of a .CSV file can be accomplished in Angular by utilizing the

Having trouble integrating the css and js animation files into my Django project

What is the process for retrieving the value of the 2nd td by clicking on the checkbox in the 1st td with JavaScript

I am eager to showcase a Pokémon image sourced from the API, but I am faced with the challenge of only having the image URL and not knowing how to display it effectively

Solving complex promises in both serial and parallel fashion

Difficulty encountered in displaying HTML within a React component

VueJS advisory: Refrain from directly altering a prop

Tips for adjusting an svg component to suit various screen sizes

The columnFilter plugin in Datatables is failing to initialize

The data is not being filtered properly in Ionic Angularjs

Exploring a JavaScript object to verify if a property contains nested data elements

Within AngularJS directives, one may find themselves utilizing services like $log or other similar

Cypress and Cucumber collaborate to reinitialize the requests within Next Js