JavaScript陷入循环吗？

Question

我正在尝试执行一个简单的动画，希望在成功返回AJAX调用后发生这种动画。

$('#result').click(function(){
    $(document).ajaxSuccess(function(){
    $('html, body').on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
        $('html, body').stop();
    });
    $('html, body').animate({
        scrollTop: $('#result').position().top
    }, 500, function(){
        $('html, body').off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
    });

    });
});

问题是，有时（并非总是）动画似乎不希望退出，因为如果用户尝试滚屏，动画会引起剧烈运动并不断返回div的顶部。 当我删除ajaxSuccess要求时，不会发生此问题。 有任何想法吗？

Answer 1

无需通过使用stop（）函数来停止鼠标滚轮，滚动等移动。

动画功能在到达文档顶部之前不会受到干扰。

这样可以：

$('#result').click(function(){
    $(document).ajaxSuccess(function(){
        $('html, body').animate({
            scrollTop: $('#result').position().top
        }, 500);
    });
});

Answer 2

每次用户单击#result时，您都将附加一个新的ajaxSuccess回调。

这意味着，如果用户单击#result N次，则每当ajax请求成功完成时，将附加N个不同的函数来执行。 并且每个函数都会尝试为$('html, body')设置动画

解决方案：将代码移出$('#result').click函数或在绑定新的处理程序之前取消绑定以前的处理程序。

这是正在发生的事情的简化示例。 尝试依次单击两个按钮：

 $("#one").click(() => { console.log("Clicked First") $("#two").click(() => console.log("Clicked Second")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id=one>First</button> <button id=two>Second</button>