當鼠標（或手指）不再拖動時，如何才能在更改時運行AJAX調用？

Question

我有一系列改變計算值的交互式滑塊。

計算在拖動手柄的每一個微小移動上運行（通過mousedown或觸摸拖動事件）。

我需要用數值更新數據庫，但只希望在用戶「丟棄」句柄後獲取數值。

如何判斷手指或鼠標是否關閉以跳過AJAX呼叫？

function handleIsBeingDragged() { 
    // calculations based on all the input values here 
    // pseudo-code to check for mouseup event 
    if (mouseUp) { 
     // save only if mouse is now up - to avoid hundreds of updates per drag event 
     $.ajax(); 
    } 
} 

Answer 1

您需要爲代碼添加一點遲滯。

發生這種情況我爲another answer here on SO寫了一個通用的debounce函數，這對此很有用。

這裏是你如何使用它：

function saveTheData() { 
    $.ajax(); /// 
} 

var saveTheDataDebounced = debounce(50, saveTheData); 

function handleIsBeingDragged() { 
    saveTheDataDebounced(); 
} 

的debounce功能：

// debounce - debounces a function call 
// 
// Usage: var f = debounce([guardTime, ] func); 
// 
// Where `guardTime` is the interval during which to suppress 
// repeated calls, and `func` in the function to call. 
// You use the returned function instead of `func` to get 
// debouncing; 
// 
// Example: Debouncing a jQuery `click` event so if it happens 
// more than once within a second (1,000ms), subsequent ones 
// are ignored: 
// 
// $("selector").on("click", debounce(1000, function(e) { 
//  // Click occurred, but not within 1000ms of previous 
// }); 
// 
// Both `this` and arguments are passed through. 
function debounce(guardTime, func) { 
    var last = 0; 

    if (typeof guardTime === "function") { 
    func = guardTime; 
    guardTime = 100; 
    } 
    if (!guardTime) { 
    throw "No function given to debounce"; 
    } 
    if (!func) { 
    throw "No func given to debounce"; 
    } 

    return function() { 
    var now = +new Date(); 
    if (!last || (now - last) > guardTime) { 
     last = now; 
     return func.apply(this, arguments); 
    } 
    }; 
} 

Answer 2

你可以AJAX調用分配給 「鼠標鬆開」 事件來代替。在jQuery手機「vmouseup」。