Is it beneficial to vary the time between function calls when utilizing setInterval in JavaScript?

Question

Is it beneficial to vary the time between function calls when utilizing setInterval in JavaScript?

My website is displaying two words one letter at a time, with a 0.1s delay between letters and a 3s pause after each full word. I attempted using setTimeout, but it's not functioning as expected. What could be the issue in my code?

var app = angular.module("app", []);

app.controller('mainCtrl', function ($scope) {
    var values = ['.com', 'available'];
    var index = 0;
    $scope.comval = '';
    function changeText (){
        if(values[index].length == $scope.comval.length) {
            $scope.comval = '';
            index++;
            if (index >= values.length) {
                index = 0;
            }
        }
        else
        {
            $scope.comval = values[index].substring(0, $scope.comval.length+1);
            $scope.$apply();
            console.log($scope.comval);
        }
    }

    setInterval(changeText,100);
});

You can see this effect on another site by visiting this link. Look for the section shown in the image below:

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

Check out the code snippet on JSFiddle.

javascript angularjs settimeout setinterval

Answer 1

Answer №1

To resolve this issue, I opted to utilize the setTimeout function (which calls the specified function once after a set time) instead of the setInterval function (which repeatedly calls the function). In order to ensure that the function is called multiple times, I nested the call to setTimeout within the function (changeText) so that it sets up a timer to call itself. This approach allows for flexibility in setting different delays for varying scenarios - 100 ms delay when printing a new letter and 3000 ms delay upon completing the printing of a new word.

var app = angular.module("app", []);

app.controller('mainCtrl', function ($scope) {
    var values = ['.com', 'available'];
    var index = 0;
    $scope.comval = '';
    
    function changeText() {
        if(values[index].length == $scope.comval.length) {
            $scope.comval = '';
            index++;
            
            if (index >= values.length) {
                index = 0;
            }
            
            // A full word has been printed!
            // Wait 3000 ms before calling the function again.
            setTimeout(changeText, 3000);
        } else {
            $scope.comval = values[index].substring(0, $scope.comval.length+1);
            $scope.$apply();
            console.log($scope.comval);
            
            // Only a single letter has been printed.
            // Wait 100 ms before calling the function again.
            setTimeout(changeText, 100);
        }
    }

    // Initiate the process.
    setTimeout(changeText, 100);
});

Fiddle.

Answer 2

To resolve this issue, I opted to utilize the setTimeout function (which calls the specified function once after a set time) instead of the setInterval function (which repeatedly calls the function). In order to ensure that the function is called multiple times, I nested the call to setTimeout within the function (changeText) so that it sets up a timer to call itself. This approach allows for flexibility in setting different delays for varying scenarios - 100 ms delay when printing a new letter and 3000 ms delay upon completing the printing of a new word.

var app = angular.module("app", []);

app.controller('mainCtrl', function ($scope) {
    var values = ['.com', 'available'];
    var index = 0;
    $scope.comval = '';
    
    function changeText() {
        if(values[index].length == $scope.comval.length) {
            $scope.comval = '';
            index++;
            
            if (index >= values.length) {
                index = 0;
            }
            
            // A full word has been printed!
            // Wait 3000 ms before calling the function again.
            setTimeout(changeText, 3000);
        } else {
            $scope.comval = values[index].substring(0, $scope.comval.length+1);
            $scope.$apply();
            console.log($scope.comval);
            
            // Only a single letter has been printed.
            // Wait 100 ms before calling the function again.
            setTimeout(changeText, 100);
        }
    }

    // Initiate the process.
    setTimeout(changeText, 100);
});

Fiddle.

Answer 3

Answer №2

To implement a time interval in your controller, you can utilize the $interval function as shown below:

$interval(changeText, 100);

Remember to include the $interval dependency in your controller.

UPDATE:

If you require a delay of three seconds before running the function, consider using the $timeout service like this:

$timeout(function() {
    $interval(changeText, 100)
}, 3000)

Once again, ensure that you inject $timeout into your controller.

Answer 4

To implement a time interval in your controller, you can utilize the $interval function as shown below:

$interval(changeText, 100);

Remember to include the $interval dependency in your controller.

UPDATE:

If you require a delay of three seconds before running the function, consider using the $timeout service like this:

$timeout(function() {
    $interval(changeText, 100)
}, 3000)

Once again, ensure that you inject $timeout into your controller.

Is it beneficial to vary the time between function calls when utilizing setInterval in JavaScript?

Answer №1

Answer №2

Similar questions

When employing useEffect, clearInterval cannot halt the execution of SetInterval

Validation method in jQuery for a set of checkboxes with distinct identifiers

Show a persistent header once you scroll past a certain point using Bootstrap

Jest may come across test suites, but it discreetly disregards the individual tests

Ways to conceal components upon clicking a different element

The dynamic data is not displaying on the Chart bundle JavaScript

Struggling to display the array after adding a new item with the push method

Ways to simulate a constant that acts as a dependency for the service being examined?

Click event not triggering on a div component in React

What is the optimal method for iterating through every element in a string array?

I am attempting to incorporate an NPM package as a plugin in my Next.js application in order to prevent the occurrence of a "Module not found: Can't resolve 'child_process'" error

Incorporating additional information into the database

Retrieving a Table Row from a TableView in Titanium Mobile

Using a single package manager for both backend and frontend development - is it possible? (Yarn/NPM)

Adding two headers to a post request in Angular 2 - a step-by-step guide!

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Is the use of addEventListener("load",... creating an excessive number of XmlHttpRequests?

I aim to customize the options of a dropdown list based on the selection of another dropdown

Zone.js error: Promise rejection caught

Check to see if a key exists within the entire JSON using jQuery