jQuery无限滚动导致链接暂时不起作用？

发布于 2024-12-18 00:56:22 字数 258 浏览 2 评论 0原文

几周前我用 jquery 实现了一个无限滚动页面。滚动本身效果很好，但我得到了一个非常奇怪的副作用。

当我滚动并加载新内容时，在前几秒钟内所有链接都不起作用。事实上，页面上任何地方的链接都不会在几秒钟内起作用。如果我滚动得非常远，例如连续快速加载 5 个页面，情况似乎会变得更糟 - 然后我必须等待 20 秒才能单击页面上任何位置的任何链接。

我在使用 Firefox 或 IE8 时也有同样的经历，所以我猜这不是浏览器的问题。

有什么想法或解决办法吗？

需要登录才能够评论，你可以免费注册一个本站的账号。

青萝楚歌 2024-12-25 00:56:22

还有这个问题吗？

问题：

初步想法：

您是否对不可点击的链接使用 .click() 或 .bind('click', function) ？尝试使用 .live('click', function) 代替。
尝试使用 setTimeout。对于某些浏览器，jQuery 的 .scroll 会在滚动条发生变化的每个像素时调用处理函数...而不是在所有滚动完成后调用，这可能会导致函数调用过载。尝试这样的操作，当您滚动时它不会执行 1000 个函数调用（这只是一个简单的示例......代码可能会更好）：
```
<脚本类型=“text/javascript”>
    var 滚动= false;
    $(document).scroll('setScroll');

    函数 setScroll() {
        滚动 = setTimeout(doScrollUpdate, 300);
    }

    函数 doScrollUpdate() {
        清除超时（滚动）；
        // 在这里做你的ajax工作
    }
```

Still have this problem?

Questions:

After 20 seconds once the page loads are the links clickable? Is the browser "frozen" for 20 seconds or is it just the links that arn't clickable?
To load more content is it a link that says "show more" or is the content automatically loaded once the user hits the bottom of the page?
Are you using jQuery's .scroll() to update the content?

Initial Thoughts:

Are you using .click() or .bind('click', function) for the links that arn't clickable? Try .live('click', function) instead.
Try using a setTimeout. For some browser jQuery's .scroll calls the handler function every pixel the scrollbar is changed... not once all the scrolling is done which can cause an overload of function call. Try something like this do that it doesn't do 1000 function calls when you scroll (this is just a quick example... code could be better):
```
<script type="text/javascript">
    var scrolling = false;
    $(document).scroll('setScroll');

    function setScroll() {
        scrolling = setTimeout(doScrollUpdate, 300);
    }

    function doScrollUpdate() {
        clearTimeout(scrolling);
        // Do your ajax stuff here
    }
</script>
```

~没有更多了~