如何按需执行javascript

我正在使用jquery构建一个选项卡。我可以在选项卡之间来回切换，并根据单击的选项卡显示/隐藏内容

真正需要的是根据单击的选项卡，我需要为每个选项卡调用不同的javascript。我不想在pageload加载所有JavaScirpt。我正在使用highcharts构建图表，这些图表可能非常沉重。我不想在页面加载时加载所有这些Java脚本。我需要根据要单击的选项卡加载Java脚本。在我如何轻松完成这一任务方面有什么帮助吗

现在我正在做的就是：

这是选项卡的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>

//在查询文档之前，请等待DOM已加载
$（文档）.ready（函数（）{
$（'ul.tabs'）。每个（函数（）{
//对于每一组选项卡，我们希望跟踪
//哪个选项卡处于活动状态及其关联的内容
var$active，$content，$links=$（this.find（'a'）；
//如果location.hash与其中一个链接匹配，则将其用作活动选项卡。
//如果未找到匹配项，请使用第一个链接作为初始活动选项卡。
$active=$（$links.filter（'[href=“'+location.hash+'“]'）[0]| |$links[0]）；
$active.addClass（'active'）；
$content=$（$active.attr（'href'））；
//隐藏剩余的内容
$links.not（$active）。每个（函数（）{
$（$（this.attr（'href'））.hide（）；
});
//绑定单击事件处理程序
$（此）。在（'click'，'a'，函数（e）上{
//使旧选项卡处于非活动状态。
$active.removeClass（'active'）；
$content.hide（）；
//使用新链接和内容更新变量
$active=$（此项）；
$content=$（$（this.attr（'href'））；
//使选项卡处于活动状态。
$active.addClass（'active'）；
$content.show（）；
//防止锚定的默认单击操作
e、 预防默认值（）；
});
});
});

这是一个示例highchart 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'
                                }
                       )};
                   )};

$（文档）.ready（函数（）{
$.ajaxSetup（{cache:false}）；
//$（函数（）{
函数cdc1\u web\u cpu（）{
var超时；
$.getJSON（'cdc1\u web\u cpu.php'，函数（数据）{
//创建一个计时器
//创建图表
$（'web1'U cpu'）。高图（'StockChart'{
图表：{
边框颜色：“#801500”，
边界半径：20，
边框宽度：1，
键入：“行”，
活动：{
加载：函数（图表）{
此.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>

这些评论似乎已经涵盖了答案，但为了澄清，请使用以下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();
  });
}

---

如果您真的不想在页面中加载所有的js，那么我强烈建议您使用AMD脚本加载程序，就像您可能希望一次加载所有的js一样，但只执行相关/可见的部分。@Mathletics，是的，我该怎么做？将每个选项卡的代码封装在一个函数中，然后在显示时调用该函数Mathletics似乎可以将其组合成一个非常好的答案。