0

I have a third-party JavaScript plugin on my site that generates reports with HTML tables, but it applies its own styling which is ugly and cumbersome to modify (every table element has a ton of classes on it that set a whole bunch of properties that I’d need to override, etc.). There’s no facility through the plugin to change this.

My site is built in Bootstrap 4, so I found what I could do is select these generated tables via jQuery, then simply strip all their custom classes and replace them with the standard Bootstrap table classes. Now they look and work exactly like all the other tables across my site.

The problem is, the plugin doesn’t expose any events or anything for me to hook into to know when a table has been generated. So I’ve resorted to just firing a function on an interval that looks for tables with these particular custom classes; if it finds any, then it strips them and swaps in the Bootstrap classes:

$(function () {
    var checkForTables = setInterval(styleTables, 500);

    function styleTables() {
        $("table.tableWithWeirdStyling").each(function () {
            $(this).attr("class", "table table-bordered table-striped");
        });
    }
});

But I can’t help but feel like this is bad for performance, because this function is firing every 500ms indefinitely, whether any of these tables are present on the particular page or not (and I can’t clear the interval once it finds the tables and applies the styling, either, because the user always has the option to regenerate them, so I have to continually check).

My question is: if most pages on my site don’t even have any of these tables, is it actually bad for performance if the function isn’t even doing anything? If so, is there any other way I could possibly achieve this?

daGUY
  • 27,055
  • 29
  • 75
  • 119
  • 2
    Maybe this can help you https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom you can apply your table fix on dom change. Or maybe you can just update the css classes for that third party plugin, it usually isn't that bad. You would probably remove most of the custom style anyway – Huangism Feb 27 '20 at 21:40
  • Not only is `styleTables` getting called every 500ms, but you have an additional interval, that does nothing, getting called every 0 milliseconds (probably every 10-15 ms, but whatever), due to `setInterval(checkForTables)`. I'd remove that line of code immediately. – Heretic Monkey Feb 27 '20 at 21:40
  • you picked the wrong solution to fix the issue, use events instead. or at least stop it after applying. xy thats not even mentioning your querying the dom for $("table.tableWithWeirdStyling") every 500ms – Lawrence Cherone Feb 27 '20 at 21:41
  • @HereticMonkey oh, I included that in my sample code by mistake, that was leftover from something else. Thanks for catching that! – daGUY Feb 27 '20 at 21:43
  • According to the docs, you supposedly have to supply the number of milliseconds with anything less than 10 being interpreted as 10. So I don't know what `setInterval(checkForTables);` does. – Booboo Feb 27 '20 at 21:43
  • @LawrenceCherone I can’t stop it after applying because I never know when a new table is going to appear. The user can regenerate them at will, and there’s no events to hook into or anything to know when that happens. If I stop it after it applies once, subsequent tables won’t get the proper styling. – daGUY Feb 27 '20 at 21:44
  • @daGUY when a table is generated, it is inserted into the DOM, so when DOM changes, apply your table fix, check the question in my first comment, check the non check marked(more votes) answer – Huangism Feb 27 '20 at 21:50
  • I’ll look into that, but more directly my question is: does it actually hurt performance (by any significant/measurable amount) to call a function repeatedly if the function itself isn’t doing anything? – daGUY Feb 28 '20 at 19:04

0 Answers0