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>