JS Use Delay Function to Realize Certain JS Effects

1.1 Problem description

Sometimes some JS codes can run successfully in cpt but will not take effect in dashboards.

For example, copy the codes from  Change the Background of Rows where Mouse Hovers to a dashboard, the codes will not take effect.

1.2 Solutions

This is because there is no Loading End event in the dashboard and dashboard only supports After Initialization events. 

Our goal is to execute JS codes after the dashboard is loaded. Through the setTimeout() function, we can delay the execution of the original JS codes to achieve the effect of Loading End event.

setTimeout(function(){ },1000);

Note: The setTimeout() function supports mobile terminals.

2.1 Template design

1) Create a new dashboard, create a dataset ds1:

SELECT * FROM ORDERS

2) Drag a report block into the body, and the design of the report block is shown in the figure below:

2.2 Add event

Select the report block and add an After Initialization event, as shown in the following figure:

The JS code is as follows:

setTimeout(function() {
    var background_color = "rgb(255,0,0)";
    var frozen_back_color = new Array();
    var back_color = new Array();
    var $last_tr;
    var i = 0;
    $(".x-table tr").bind("mouseenter", function() {
        if(typeof($last_tr) != "undefined") {
            if(typeof($(this).attr("id")) != "undefined") {
                if(typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
                    $("#content-container #" + $last_tr.attr("id")).each(function() {
                        $(this).children("td").each(function() {
                            $(this).css("background-color", frozen_back_color[i][$(this).index()]);
                        });
                        i = i + 1;
                    });
                    i = 0;
                } else {
                    $last_tr.children("td").each(function() {
                        $(this).css("background-color", back_color[$(this).index()]);
                    });
                }
                frozen_back_color = [];
                back_color = [];
            }
        }
        if(typeof($(this).attr("id")) != "undefined") {
            if(typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
                $("#content-container #" + $(this).attr("id")).each(function() {
                    frozen_back_color[i] = new Array();
                    $(this).children("td").each(function() {
                        frozen_back_color[i][$(this).index()] = $(this).css("background-color");
                        $(this).css("background-color", background_color);
                    });
                    i = i + 1;
                });
                i = 0;
            } else {
                $(this).children("td").each(function() {
                    back_color[$(this).index()] = $(this).css("background-color");
                    $(this).css("background-color", background_color);
                });
            }
        }
    });
    $(".x-table tr").bind("mouseleave", function() {
        if(typeof($(this).attr("id")) != "undefined") {
            $last_tr = $(this);
        }
    });
}, 1000);

3.1 PC side

3.2 Mobile

Note: The JS codes in the example does not support mobile terminals.

Use Delay Function to Realize Certain JS Effects.fr