Javascript JS onscrollStop事件变得越来越慢
我使用FLOWING代码作为Javascript JS onscrollStop事件变得越来越慢,javascript,jquery,google-chrome,Javascript,Jquery,Google Chrome,我使用FLOWING代码作为onscrollStop事件执行: let timeoutId = null; $(window).on('scroll', function () { if(timeoutId)clearTimeout(timeoutId); timeoutId = setTimeout(function () { console.log("ok!"); }, 200); }); 问题是,当我在Chrome 58.0.3029.110(64
onscrollStop
事件执行:
let timeoutId = null;
$(window).on('scroll', function () {
if(timeoutId)clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
console.log("ok!");
}, 200);
});
问题是,当我在Chrome 58.0.3029.110(64位)上测试时,“ok!”日志变得越来越慢(尝试滚动更多次,至少30次)
i、 e.有时在滚动结束时立即显示(200ms),但有时在滚动结束后长时间显示(最大为1s)
然后我在MicrosoftEdge、IE和Firefox上测试了它,它运行得非常好
我注意到的另一件事是,这样的代码需要大量的CPU,当我在MicrosoftEdge、IE和Firefox中测试时,我的CPU运行率最高可达40%。但是chrome不会(如果你不能复制这个,试着用一个更复杂的函数替换log函数)
所以我相信是chrome的CPU安全策略阻止了代码以预期的速度运行
所以很明显,问题是代码太不有效了
有没有更有效的方法来实现
滚动停止
事件?该代码对我来说很好,58.0.3029.110 x64。这可能是页面上的其他脚本造成的。你在那里做的方式很标准。另外,不相关,但除非你将其编译到ES5,否则不要使用let
,因为它是ES6的一项功能,仅在现代浏览器上受支持。打开inspector,然后单击DOM树中的html
元素。然后单击“样式”选项卡旁边的“事件侦听器”选项卡,选中“祖先”框,查看是否列出了多个滚动事件。@HPdev是的,您是对的,我将此代码从项目中分离出来,并且运行良好。但是事件监听器只显示了一个jquery处理程序,我如何才能找到所有使用jquery注册的处理程序?(项目太大,我无法深入研究。)没有简单的方法可以做到这一点,但您可以用开发的未统一版本替换jquery,然后检查“事件监听器”再次单击tab键以确定设置事件侦听器的确切代码行,然后可以在该行上方添加抛出新错误('event set')
,然后在控制台中获得调试回溯,显示调用链。