如果多次調用同一函數，該如何停止以前的實例？

Question

我已經編寫了一個自定義動畫功能。 它通常可以正常工作，但是當我調用animate(); 在使用不同的endCallbacks快速連續進行時，有時回調確實重疊得很嚴重，從而在錯誤的時間導致錯誤的操作。

問題在於該函數實例化多次並執行直到達到endValue為止。 currentValue變化太快了，以至於我只能看到html頁面動畫中的最后一個值。 這掩蓋了這種不必要的行為。

調用animate();時需要什么animate(); 第二次是結束animate();的第一個實例animate(); 並觸發具有新值和新回調的新代碼。 同時，我想停止setTimeout()函數只是為了確保沒有觸發錯誤的回調。

window.onload = function(){
    document.addEventListener('click', // some button
        function (){
            animate(1, 10);
        }, false
    );
}

function animate(startValue, endValue, callback, endCallback) {
    var startValue = startValue,
        currentValue = startValue,
        endValue = endValue,
        callback = callback,
        timeout = null;

    loopAnimation();
    function loopAnimation(){
        if (currentValue != endValue){
            timeout = setTimeout(function(){
                currentValue++;

                // Callback executes some page manipulation code
                if (typeof callback !== "undefined") callback(currentValue); 
                console.log(currentValue);
                loopAnimation();
            },500)
        } else {
            console.log("This callback triggers some specific changes in my page");
            if (typeof endCallback !== "undefined") endCallback();
        }
    }
}

而不是在控制台中看到：1,2,3，-1,4,2,5 ... 6,9,7,10,8,9,10

我只想看：1,2,3，-1,2 ... 7,8,9,10

但是，請記住，由於我在腳本中使用animate() ，我不能依賴於知道輸入變量的名稱或范圍。 這使我無法自己解決問題。

Answer 1

雖然這不是您所要求的實現，但我想知道Underscore的加速或反跳功能是否可以滿足需要？

防反跳功能可以確保您的函數每秒被調用的次數不超過X次-每次調用仍將執行一次，但是后續的調用將被延遲以滿足您的速率限制。 因此，如果您快速連續調用了兩次動畫，則防抖動可以將第二次執行延遲到第一次執行之后或100ms之后。

節流閥將基本上忽略速率限制期間發生的呼叫。 因此，如果您在100毫秒內對動畫設置了10次調用，則除了第一個動畫外，其他所有動畫都將被丟棄。 （實際上，它將執行第一個操作，在等待期結束時執行一個操作）。

您無需使用所有下划線即可獲得這些方法。 我見過人們經常從下划線復制和粘貼反跳和/或油門功能。 如果您使用的是Google，則可以找到一些獨立的調節或反跳實現。

油門和反跳通常只用於您的情況動畫。

對於您的原始規范，實際上是“結束animate（）的第一個實例” —在javascript中沒有很好的可靠方法。 沒有真正的通用方法來“取消”已經執行的功能。 如果您可以使其在防抖或節流的情況下工作，那么我認為它將減少沮喪感。

Answer 2

您需要存儲上次使用的超時ID。 因此，下次啟動新動畫時，請使用此超時id和clearTimeout清除所有正在進行的動畫。
我發現將間隔存儲在函數本身上很方便。

在這里查看jsbin： http ://jsbin.com/nadawezete/1/edit?js，控制台，輸出

window.onload = function(){
    document.addEventListener('click', // some button
        function (){
            animate(1, 10);
        }, false
    );
};

function animate(startValue, endValue, callback, endCallback) {   
    var currentValue = startValue;
    if (animate.timeout) clearTimeout(animate.timeout);
    loopAnimation();
    function loopAnimation(){
        if (currentValue != endValue){
            animate.timeout = setTimeout(function(){
                console.log(currentValue);
                currentValue++;    
                // Callback executes some page manipulation code
                if (callback ) callback(currentValue); 
                loopAnimation();
            },500);
        } else {
            console.log("This callback triggers some specific changes in my page");
            if (endCallback) endCallback();
        }
    }
}