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

Question

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 example on Plunker, the action is currently being called every time the number changes. However, I would like the action to be executed only when the user has not made any changes to the value for more than 2 seconds.

<div class="col-md-3 divGridText">
    <label for="excludeMinutesStep" style="font-weight:bold">Exclude tasks &lt; </label>
    <input id="excludeMinutesStep" min="0" max="10" ng-model="excludeValue" ng-change="numericStepperChanged(excludeValue)" size="2" style="width:40px;" type="number" /> <b>minutes</b>
</div>

$scope.excludeValue = 5;
$scope.numericStepperInitValue = 0;

$scope.numericStepperChanged = function(data) {console.log("A");
  $scope.numericStepperHit = true;
  if (data != undefined) {
    $scope.excludeValue = data;
    if (data == 0) {
      $scope.isExcludeNeeded = false;
    }

    if ($scope.numericStepperInitValue == 0) {
      $timeout($scope.callAtNumercStepperChangeTimeout, 2000);
    }
  }
}

$scope.callAtNumercStepperChangeTimeout = function() {
  $scope.numericStepperHit = false;
  $scope.numericStepperInitValue++;
  $scope.changeGraph();
}

$scope.changeGraph = function() {
  if (!$scope.numericStepperHit) {
    console.log("Action called "+$scope.excludeValue);
    $scope.mytext = "Action called "+$scope.excludeValue;
    $scope.isExcludeNeeded = true;
  }
}

javascript angularjs

Answer 1

Answer №1

Debouncing is a common and useful pattern that you may need in your code.

An easy way to implement debouncing is by using underscoreJs debounce method:

$scope.debouncedFunction = _.debounce(myFunction, 2000);

<input ng-change="debouncedFunction()" size="2" style="width:40px;" type="number" />

If you prefer, you can also create your own debouncing function like this:

var promise = null;
function debouncedFcn{
    if(promise)
        $timeout.cancel(promise);
    var promise = $timeout(myFunction, 2000);
}

For more information, check out the Debounce documentation.

Answer 2

Debouncing is a common and useful pattern that you may need in your code.

An easy way to implement debouncing is by using underscoreJs debounce method:

$scope.debouncedFunction = _.debounce(myFunction, 2000);

<input ng-change="debouncedFunction()" size="2" style="width:40px;" type="number" />

If you prefer, you can also create your own debouncing function like this:

var promise = null;
function debouncedFcn{
    if(promise)
        $timeout.cancel(promise);
    var promise = $timeout(myFunction, 2000);
}

For more information, check out the Debounce documentation.

Answer 3

Answer №2

I created a function called timer that evaluates if a value has changed within a 2-second interval. If not, it triggers the mainFunction() which displays an alert. The timer function is then utilized in $scope.$watch to monitor changes in the excludeValue.

$scope.excludeValue = 5;

$scope.$watch('excludeValue',function(oldVal,newVal){
   if(oldVal !== newVal) // a new change 
   {
      timer(oldVal,newVal)
   }
});

var timer = function(oldVal,newVal){
   var currentVal = angular.copy($scope.excludeValue);
   $timeout(function(){
     if(currentVal == $scope.excludeValue)
     {
       // no changes made within 2 seconds 
       mainFunction()
     }
     else
     {
       // change made within 2 seconds
     }
   }, 2000);
};

timer();

var mainFunction = function(){
   alert('No changes were made within 2 seconds.');
};

You can view the code on Plunker

Answer 4

I created a function called timer that evaluates if a value has changed within a 2-second interval. If not, it triggers the mainFunction() which displays an alert. The timer function is then utilized in $scope.$watch to monitor changes in the excludeValue.

$scope.excludeValue = 5;

$scope.$watch('excludeValue',function(oldVal,newVal){
   if(oldVal !== newVal) // a new change 
   {
      timer(oldVal,newVal)
   }
});

var timer = function(oldVal,newVal){
   var currentVal = angular.copy($scope.excludeValue);
   $timeout(function(){
     if(currentVal == $scope.excludeValue)
     {
       // no changes made within 2 seconds 
       mainFunction()
     }
     else
     {
       // change made within 2 seconds
     }
   }, 2000);
};

timer();

var mainFunction = function(){
   alert('No changes were made within 2 seconds.');
};

You can view the code on Plunker

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

Answer №1

Answer №2

Similar questions

Steps for making a webpack-bundled function accessible globally

When I receive a 404 response from the API, I aim to start my observable

Tips for selecting a JSON data node on-the-fly using jQuery

What could be causing React to throw an error?

What are the potential causes of receiving the error message "No Data Received ERR_EMPTY_RESPONSE"?

Maximizing the potential of .delegate in combination with .closest

Automatically close the popup each time it is displayed (using jQuery/JavaScript)

Unique syntax using markdown-react

I'm curious about the meaning of "!" in pseudo-code. I understand that it represents factorial, but I'm unsure of how to properly interpret it

Retrieve information in JSON format from a document

Why is my return statement in JavaScript Nextjs mapping values twice?

AngularJS: Automatically refreshing ng-repeat based on checkbox filter updates in code

How can I show the <md-progress-linear md-mode="indeterminate"> when a button is clicked?

Utilize the _sortBy function from the lodash library to arrange an array based on a specific field

I'm wondering, on a storybook, where is the best place to set my MUI X license key

Display live data directly from a specific XML tag on a webpage

What is the best way to retrieve the value from a PHP request?

Obtain the AJAX response in separate div elements depending on whether it is successful or an error

Creating custom validation in AngularJS using CSS styling Incorpor

Shuffle the JSON data before displaying it