点击事件后的jQuery滚动监听器

Question

如何在点击事件后正确激活滚动监听器？

我目前正在使用以下代码：

$('.button').click(function (event) {
   $(window).on("scroll", someFunction);
}

someFunction = function() {
   //do stuff 
   $(window).off("scroll"); //disable scroll listener
}

在点击事件中，我启用滚动监听器并运行someFunction。该函数执行一些操作，并在完成后禁用滚动监听器。再次点击时，将重新启用滚动监听器。

我的担忧是我做得不对。请给予建议！

注意：滚动监听器不能无限期地运行。它在单击时启动，必须在myFunction结束时停止。

注意：我不试图检测用户何时停止滚动。

- CyberJunkie

---

它能用吗？在我看来很好。 - scniro

可能是[ jQuery scroll() detect when user stops scrolling ]的重复问题（https://dev59.com/y2ox5IYBdhLWcg3wi0vF） - Jako

@Jako 不是重复问题。我正在尝试找出如何在点击事件后“激活滚动监听器”，正如所发布的那样。不是检测用户停止滚动。完全不同！ - CyberJunkie

Answer 1

你可以使用jQuery .one()：

$('.button').on('click', function() {
    $(window).one('scroll', someFunction);
});

- sergdenisov

Answer 2

每次单击都会添加一个额外的滚动事件监听器。我建议用另一个变量来封装绑定操作：

var isScrollBindingActive = false;
$('.button').click(function (event) {
    if (!isScrollBindingActive) {
        isScrollBindingActive = true;
        $(window).on("scroll", someFunction);
    }
}

someFunction = function() {
   //do stuff 
   $(window).off("scroll"); //disable scroll listener
   isScrollBindingActive = false; // allow binding again if wished
}

- Alexander Bondar

---

谢谢！这就是我遇到困难的原因！我会投票支持正确答案，但Sergey的解决方案 $(window).one('scroll', someFunction); 似乎也能用更少的代码实现。 - CyberJunkie

Answer 3

你可以这样做：

$('.button').click(function (event) {
   $(window).bind("scroll", someFunction);
}

someFunction = function() {
   //do stuff 
   $(window).unbind("scroll"); // remove scroll listener
}

- Tyr

---

使用 bind 和 on 有什么区别吗？ - CyberJunkie

是的，bind已经被弃用了。 - scniro

我在bind/unbind的api中没有找到任何已弃用的标记。 - Tyr

我认为@sal-niro的意思是“实时”。 - Alexander Bondar

@Tyr，你也许是对的，关于官方弃用的问题，但文档确实说明“从jQuery 1.7开始，.on()方法是附加事件处理程序到文档的首选方法”。无论如何，bind()不应该被用来代替on()。除非你能想到一个好的理由？ - scniro

根据jQuery论坛帖子，on提供了更多的功能，因此建议使用它。bind只是on的别名。 - Alexander Bondar