阿賈克斯KEYUP VS用戶打完

我想知道，如果這甚至有可能就是我要找：阿賈克斯KEYUP VS用戶打完

我有一個表，這也是看起來像這樣一種形式：

Exercise | Reps | Lbs | Kg 
------------------------------------- 
Squat  | 8 | 135 | 61.23 
Squat  | 8 | 225 | 102.06 
Squat  | 6 | 315 | 142.88 
Squat  | 2 | 405 | 183.70 
Squat  | 1 | 485 | 219.99

哪裏'Reps'，'Lbs'和'Kg'值都可由用戶編輯。

我遇到了這個問題。我不想在每一個keyup事件上發送ajax請求，而且我也不想提交提交按鈕。我已經實現了一個計時器，以便在用戶停止鍵入2秒（或不管多長時間）後更新計時器。然而，我遇到的問題是我不能在不同的行之間分開這個計時器。讓我來解釋：

如果在我的桌子上面，如果我135lbs編輯頂行會1）更新公斤適當立即& & 2）開始倒數計時。

如果我再開始編輯在225lbs的下一行，定時器將重新開始，這意味着第一行不會得到更新。

潛在的解決方案是讓計時器重新開始爲每一個新的編輯，但是當它終於完成了，然後更新一切。但是，這似乎也可能是一種浪費，因爲我的數字或行在技術上可能是無限的。

我曾經想過添加類到任何一個人發生了變化，然後只更新那些的...但是，如果他們更新一個，然後再次更新回到了它原來...那麼它也沒有按」需要更新。

關於如何解決這個問題的任何建議？

來源

2016-11-13 Ridge Robinson

在我看來，我剛纔想到了一個很好的潛在解決方案，是剛剛運行Ajax時的輸入變化的焦點。這將允許用戶輸入儘可能多或少的字符，如果他們轉到另一個輸入...它將更新原始輸入。儘管如此，我仍然有任何其他建議。 –

如何做這兩個？如果用戶鍵入並暫停2秒，則進行ajax調用。如果焦點離開輸入，則進行ajax調用並取消定時器。這樣一次最多隻能有一個計時器。 –

這是真的......可以做到這一點。可能是一個額外的電話給服務器，如果他們等待幾秒鐘，然後離開輸入而不做另一個改變....但可能是一個很好的解決方案。 –

你可以做到以下幾點：

坐落於KEYUP（或粘貼）的輸入值發生變化時，一個計時器。
立即Ajax調用當輸入失去焦點（在它已經改變）。

關鍵是要正確取消定時器並在必要時中止ajax調用。

function clearTimerForInput($input) { 
    var timerId = $input.data('timerId'); 
    if (timerId) { 
     clearTimeout(timerId); 
     $input.removeData('timerId') 
    } 
} 

function updateServerForInput($input) { 
    var jqXhr = $input.data('jqXhr'); 

    clearTimerForInput($input); 

    // Abort an existing ajax call. 
    // Note: The call still gets to the server, 
    //  but its response will be ignored. 
    if (jqXhr) { 
     jqXhr.abort(); 
     $input.removeData('jqXhr'); 
    } 

    // Update the current value. 
    $input.data('currentValue', $input.val()); 

    // Make the ajax call. 
    $input.data('jqXhr', $.ajax({ 
     // ... 
    }); 
} 

$('#myTable') 
    .on('focus', ':input', function() { 
     var $input = $this; 
     $input.data('currentValue', $input.val()); 
    }); 
    .on('keyup paste', ':input', function() { 
     var $input = $this; 

     clearTimerForInput($input); 

     // Note: Not all keyup events will change the value. 
     if ($input.val() != $input.data('currentValue')) { 
      $input.data('timerId', setTimeout(function() { 
       updateServerForInput($input); 
      }, 2000); 
     } 
    }); 
    .on('blur', ':input', function() { 
     var $input = $this; 
     if ($input.val() != $input.data('currentValue')) { 
      updateServerForInput($input) 
     } 
    });

注意：您需要中止Ajax調用的原因是在（極）罕見的情況下，第一AJAX調用之前第二AJAX調用返回。如果你不中止第一個Ajax調用，當你處理它的響應時，你將用無效值更新頁面。

來源

2016-11-13 19:50:45

好的答案......我喜歡中止，那不是我想到的那種東西。 –

阿賈克斯KEYUP VS用戶打完

回答

相關問題