Question

我没有Javascript经验，所以如果这是一个基本问题，请道歉，但我的应用程序负责人中有一个js脚本，这会减慢页面加载时间（例如examplepage.php）。代码如下：

<script type="text/javascript">
$(document).ready(function(){ 

  $("a").click(function(){

    $.get('getdata.php', function(data) {
            $('#getdata').html(data);
        });
  });

});
</script>

getdata.php运行一个通过API连接到另一个服务的脚本。在examplepage.php上我有一个链接，一旦点击激活上面的js脚本，它从API中提取数据（通过getdata.php）。这个功能有效，但我发现在加载页面时，无论如何都会运行js脚本，因此减慢了页面的加载时间。

我不希望脚本不必要地调用API（即，如果用户没有单击examplepage.php上的链接）。如何停止运行此js脚本？

很抱歉，如果这没有意义 - 我是JS初学者！

非常感谢，

格里

Answer 1

您使用的脚本在语义上等同于此脚本（我刚刚为您使用的匿名函数指定了一个名称）：

<script type="text/javascript">
function readyAction() {
    $("a").click(clickEvent);
}

function clickEvent() {
    $.get('getdata.php', function(data) {
            $('#getdata').html(data);
        }
}

$(document).ready(readyAction);
</script>

您可以这样阅读：

$(document).ready(readyAction);表示$('document')已满载ready（这是一种简化），然后执行函数readyAction。请注意，该函数已被寻址（在其名称后面没有（））并且未在此行执行。

readyAction函数只做一件事：扫描DOM并找到所有锚点$("a") 然后将收集的元素挂钩到onclick事件的处理程序clickEvent。

函数clickEvent执行XHR连接，从服务器检索数据，然后使用id getdata填充div（或任何元素）。它仅在用户点击链接时执行。

就是这样。

您没有使用此代码发出额外不需要的XHR电话我希望这能够揭示该代码的内部运作。

修改
正如Quincy所指出的，也许你想要操纵的DOM非常大，或者有很多锚元素，这可能会减慢你的执行速度，这是一个难得的机会，但也许是你的情况。您可以尝试通过jquery为您想要动画的链接添加ID来限制搜索范围。

即。您可以在$("a").click(中更改$("#loadpagedatalink').click(到目前为止'loadpagedatalink'是您必须将点击处理程序附加到的链接的ID。

Javascript帮助 - 减慢页面速度

1 个答案: