Question

我遇到的问题是我有3个页面，仪表板（dashi.html），统计数据和日志。我有一个占用大量内存空间并降低应用程序性能的图表，图表为$("#dash").load("dashi.html");。

我想要实现的只是当用户在仪表板页面中或想要访问仪表板页面时，才显示来自dashi.html的此内容。然后它必须在所有其他页面中空闲..

如何让dashi.html仅在主页而非其他页面中可见，也就是说只在主页上运行并在未查看时变为空闲？

下面我写了一个JQuery代码。它工作正常，但dashi.html引起了巨大的问题..

<script>

$(function() {

    $("#dash").load("dashi.html");

    $('#selectTable').hide();
    $('#database').hide();
    $('#dash').show();

    $('a#dashboard').on('click', function() {
        $('.active').removeClass('active');
        $('#selectTable').hide();
        $('#database').hide();
        $('#dash').show();
    });

    $('a#stats').on('click', function() {
        $('.active').removeClass('active');
        $('#database').hide();
        $('#dash').hide();
        $('#selectTable').show();
    });
    $('a#log').click(function() {
        $('.active').removeClass('active');
        $('#dash').hide();
        $('#selectTable').hide();
        $('#database').show();
    });
    var pres_row = 0;
    $('[data-row]').on('click', function() {
        var row = $(this).attr('data-row');
        $('.active').removeClass('active');
        $('#table' + row).addClass('active');

        if (row !== pres_row) {
            // clear the currently running interval if any
            if ('diagramInterval' + pres_row in window) {
                clearInterval(window['diagramInterval' + pres_row]);
            }
            pres_row = row;
            // load again only if not loaded
            if ('diagram' + pres_row in window) {
                window['diagram' + pres_row]();
            } else {
                $.getScript("SensorTables/diagram" + pres_row + ".js", function() {
                    window['diagram' + pres_row]();
                });
            }

        }
    });

});

</script>

Answer 1

您需要使用窗口模糊和焦点事件：

$(function() {
  $(window).on("blur focus", function(e) {
    if ($(this).data("prevEvent") !== e.type) { //fix events double firing issues
      switch (e.type) {
        case "blur":
          $('body').append('<div style="color:gray">window is inactive...</div>');
          break;
        case "focus":
          $('body').append('<div style="color:red">window is active again...</div>');
          break;
      }
    }
    $(this).data("prevEvent", e.type);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您可以停止在窗口模糊处显示动画和执行其他繁重任务，并在焦点后再次继续。

仅在一个页面中显示内容（JavaScript）

1 个答案: