Question

我正在使用jquery来构建标签。我可以在标签之间切换回来，根据我点击的标签显示/隐藏内容。

真正需要的是根据点击的标签，我需要为每个标签调用不同的javascript。我不想在pageload加载所有javascirpts。我使用highcharts来构建图表，这些图表可能非常繁重。我不想在页面加载时加载所有这些javascripts。我需要根据要点击的标签加载javascripts。有什么帮助，我怎么能轻松完成这个？

现在这就是我在做的事情：

这是标签的javascript

<script>
    // Wait until the DOM has loaded before querying the document
    $(document).ready(function () {
        $('ul.tabs').each(function () {
            // For each set of tabs, we want to keep track of
            // which tab is active and it's associated content
            var $active, $content, $links = $(this).find('a');

            // If the location.hash matches one of the links, use that as the active tab.
            // If no match is found, use the first link as the initial active tab.
            $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
            $active.addClass('active');
            $content = $($active.attr('href'));

            // Hide the remaining content
            $links.not($active).each(function () {
                $($(this).attr('href')).hide();

            });

            // Bind the click event handler
            $(this).on('click', 'a', function (e) {
                // Make the old tab inactive.
                $active.removeClass('active');
                $content.hide();

                // Update the variables with the new link and content
                $active = $(this);
                $content = $($(this).attr('href'));

                // Make the tab active.
                $active.addClass('active');
                $content.show();

                // Prevent the anchor's default click action
                e.preventDefault();
            });
        });
    });
</script>

这是一个示例高图javascript来创建图表并将其绑定到div

<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });

//$(function() {
function cdc1_web_cpu() {

var  timeout;
    $.getJSON('cdc1_web_cpu.php', function(data) {

        // Create a timer

        // Create the chart


    $('#web1_cpu').highcharts('StockChart', {
            chart: {
                borderColor: '#801500',
                borderRadius: 20,
                borderWidth: 1,
                type: 'line',
                events: {
                    load: function(chart) {
                        this.setTitle(null, {

                        });
                    }
                },
                zoomType: 'x'
                                }
                       )};
                   )};

这是html

<ul class='tabs'>
   <li><a href='#tab1'>HOME</a></li>
   <li><a href='#tab2'>APPS</a></li>
</ul>
<div id='tab1'>
   <div id="container">
      <table align="center">
      <tr>
         <td>
            <div id="web1_cpu" class="chart" style="width:550px; height:250px;"></div>
         </td>
      </tr>
   </div>
</div>
<div id='tab2'>
   <div id="container">
      <table align="center">
      <tr>
         <td>
            <div id="app_cpu" class="chart" style="width:550px; height:250px;"></div>
         </td>
      </tr>
   </div>
</div>

Answer 1

评论似乎已经涵盖了答案，但为了澄清，请采取以下Javascript：

function yeSawgHohgothNektu() {
  // Execute a labyrinthine mammoth of 80 KB of complicated calculation code to summon
  // SawgHogoth, the dark lord of Javascript code, and destroy the user's processor.
}

......只有在该功能实际被调用后才会发生。加载80KB文件并解析其内容所花费的时间对于大多数浏览器来说通常都很小。正如一位评论者所说，如果你真的想尽可能地优化那个时间，请使用AMD。它需要在另一端特别定义，但这是后来如何调用它。

function onClickedBeginSummoning() {
  // user has initiated the summoning ritual
  require(['libraries/forbiddenhall/yeSawgHogothNektu'], function(ye) {
    // libraries/forbiddenhall are directories containing JS files
    ye();
  });
}

你如何按需执行JavaScript

1 个答案: