为什么我的回调中的这段代码在页面加载时执行

Why does this code in my callback execute on page load?

本文关键字：加载 执行 代码 回调 我的 段代码 为什么      更新时间：2023-09-26

Javascript:

$('#pagination-demo').twbsPagination({
    totalPages: 35,
    visiblePages: 7,
    onPageClick: function (event, page) {
        console.log('Why does this run on load?');
    }
});

标记：

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://esimakin.github.io/twbs-pagination/js/jquery.twbsPagination.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <ul id="pagination-demo" class="pagination-sm"></ul>
</body>
</html>

JS Bin在此：http://jsbin.com/potekina/1/edit

在onPageClick回调中，我登录到控制台"为什么这会在加载时运行？"。为什么它在负载下运行？

在init:中添加一个选项

$('.pagination').twbsPagination({
    initiateStartPageClick: false
});

来源：

init: function (options) {
   ...
   this.$element.bind('page', this.options.onPageClick);
   ...
   this.$element.trigger('page', this.options.startPage);
}

twpsPagination插件显然正在初始化中触发onPageClick。这是插件的特性，而不是代码中的异常。我们无法回答作者对设计选择的推理。

据推测，该事件是用于页面后渲染设置的，他们猜测它与设置初始页面和后续页面加载一样重要，但我认为"页面点击"有点用词不当。

如果你真的想让你的脚本只在实际的页面点击时运行，你必须执行一些变通方法，比如一个变量：

var firstPageClick = true;
onPageClick: function() {
   if(firstPageClick) {
       firstPageClick = false;
       return;
   }
   // actual event listener
}
相关文章：