滚动结束后如何调用函数？

我想在滚动结束后立即调用一个函数。 我尝试了很多不同的东西，其中没有一个工作得很好，然后我在SO中找到了这个解决方案：

我如何知道何时停止滚动Javascript

我仔细看了第二个答案并试了一下 – 它有效。 然后我试着为了我的目的略微改变它。 所以现在整个shebang看起来像这样：

      #scrollableDiv{ width:500px; height:100px; overflow:scroll; } #someContent{ width:600px; height:200px; }    $(document).ready(function() { $('#scrollableDiv').bind('scroll', bodyScroll); var scrollTimer = -1; function bodyScroll() { console.log('scrolling.'); if (scrollTimer != -1) clearTimeout(scrollTimer); scrollTimer = window.setTimeout('scrollEnded()', 500); }; function scrollEnded(){ console.log('scrollEnded. Now do something astounding.'); }; });    
 
 Scroll me. 
 
   

当我运行它时，滚动事件触发（太棒了！）。

然后，不是调用我的“scrollEnded（）”函数，而是生成错误：“scrollEnded未定义”。 我试图通过进入调试模式并逐步完成脚本来找出它的来源，但随后我进入了一个“匿名函数” – 这就是我目前对这个问题的理解的极限。 我已经尝试将scrollEnded（）函数移到顶部。 我尝试过各种各样的事情……

我能做些什么来完成这项工作？ （这件事可以吗？）

Answer 1

jQuery 油门/去抖动插件非常适合这个。 使用at_begin = false在最后执行回调。

 var scrollEnded = $.debounce(500, false, function () { console.log('scroll ended'); }); $('#scrollableDiv').scroll(scrollEnded); 

演示

Answer 2

作为所有这些答案的补充，我只建议设置200ms超时而不是500. 200ms是手指移动和期望看到效果的眼睛之间的平均人眼反应。 200ms的超时应足够短， 以免被用户注意到，并且足够长时间以便javascript触发并完成事件。 我之前尝试过200ms，它似乎工作得很好，即使在较慢的PC上也是如此。

Answer 3

你有没有尝试将scrollEnded（）放在bodyScroll（）的顶部？

 function scrollEnded(){ console.log('scrollEnded. Now do something astounding.'); }; function bodyScroll() { console.log('scrolling.'); if (scrollTimer != -1) clearTimeout(scrollTimer); scrollTimer = window.setTimeout('scrollEnded()', 500); }; 

Answer 4

对不起，我完全忽略了函数在闭包内的事实，因此在我之前的响应中页面不可用。 你可以通过以下方式使它工作：

 window.scrollEnded = function () { console.log('scrollEnded. No do something astounding'); } 

接下来是

 window.setTimeout(window.scrollEnded, 500); 

这应该删除字符串的eval，并将其放在可用的全局范围内。 关于名称空间污染，还有其他一些奇怪之处，但暂时我试图变得有点简单并帮助你实现它。