Does the utilization of setTimeout(function, 100) have an impact on performance?

Question

Does the utilization of setTimeout(function, 100) have an impact on performance?

I have implemented a function that continuously checks if the URL contains any of the navigation hrefs every 100ms. If it finds a match, specific elements are assigned the class active.

Here's the code snippet:

    var checkActive = function(){
        var path = window.location.pathname,
            path = decodeURI(path),
            path = path.replace(/[\/]/, "");

        if ( window.location.pathname.indexOf(path) > -1 ) {
        $('.navigation .nav li a[href*="' + path + '"]').parent().addClass('active');
        $('.navigation .nav li a:not([href*="'+path+'"])').parent().removeClass('active');
    }

    (function loopingFunction() {
        checkActive();
        setTimeout(loopingFunction, 100);
    })();

However, I am concerned about whether checking every 100ms will impact the performance for users with slower PCs?

P.s: The reason I opted for this approach is because I am utilizing pushState, statechange and .load() to update my content dynamically without refreshing the entire page.

javascript jquery html css

Answer 1

Answer №1

There is minimal impact on performance as it is a quick check done 10 times per second. To optimize, you can compare the unparsed value of location.hash with the last used value:

var lastHash = String(location);
var checkActive = function(){
    if (lastHash === String(location)) {
        return;
    }
    // ...do work...
};

However, this method is mainly needed for older browsers. For newer browsers, you can simply utilize the hashchange event and check its support like so:

if (typeof window.onhashchange !== "undefined") { // Modern browser, use hashchange event } else { // Older browser, implement a workaround }

(Apologies, the scope extends beyond just hash fragments.)

Answer 2

There is minimal impact on performance as it is a quick check done 10 times per second. To optimize, you can compare the unparsed value of location.hash with the last used value:

var lastHash = String(location);
var checkActive = function(){
    if (lastHash === String(location)) {
        return;
    }
    // ...do work...
};

However, this method is mainly needed for older browsers. For newer browsers, you can simply utilize the hashchange event and check its support like so:

if (typeof window.onhashchange !== "undefined") { // Modern browser, use hashchange event } else { // Older browser, implement a workaround }

(Apologies, the scope extends beyond just hash fragments.)

Does the utilization of setTimeout(function, 100) have an impact on performance?

Answer №1

Similar questions

Conflicting TypeScript enum types: numbers and numbers in NestJS/ExpressJS

Is there a way to change the color of a number's font based on whether it is preceded by a "+" or "-" sign?

I am looking to preload a separate webpage prior to the HTML loading in AngularJS

The dropdown submenu in Bootstrap 3 remains persistently open

Error: ng-messages syntax issue with the field parameter

Display a loading indicator or progress bar when creating an Excel file using PHPExcel

React Animation Library With Smooth Initial Render and No Dependency on External Props

What is the advantage of utilizing AngularJs .constant() over simply declaring a JavaScript const variable?

Update a particular class following an AJAX POST request in JavaScript

What's the process for including delivery charges in Stripe transactions?

Please provide the date using the Foundation Datepicker tool

I am facing an issue where using JSON stringify in React Native successfully returns my array, but it is unable to display

Trigger the dimming effect on the webpage when HTML5 video starts playing

What is the method for setting the content-type in an AJAX request for Android browsers?

Overflow due to cascading style sheets

attempting to transform promise-queue demo for use in a nodejs environment

Combining three.js geometry and selecting objects with an octree

Having difficulty upgrading from BootStrap 3 to BootStrap 4

I possess a variety of poppers and desire for the opened one to close when another one is opened

The overflow hidden function does not seem to be fully functional on the iPad