Ajaxは

Question

を入力し終え、これは私が探しています何でも可能である場合、私は疑問に思って：

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'の値はすべて編集可能です。

私はこれに問題が発生しています。 1回のキーアップイベントごとにajaxリクエストを送信したくないので、サブミットボタンも必要ありません。私はタイマーを実装しているので、ユーザが2秒間（または長時間）タイピングをやめると更新されます。しかし、私が実行している問題は、このタイマーを別の行に分けることができないことです。私は説明しましょう：

もし上の行を135lbsで編集すると、それはすぐに適切にKgを更新します& & 2）カウントダウンタイマーを開始します。

次に225lbsで次の行を編集すると、最初の行が更新されないことを意味するタイマーが開始されます。

潜在的な解決策は、新しい編集ごとにタイマーを開始することですが、最終的に終了したらすべてを更新することです。しかし、これは私の数や行が技術的には無限の量になるかもしれないので、それは無駄かもしれないようです。

変更されたクラスにクラスを追加することを考えましたが、それらのクラスのみを更新します...しかし、それらを更新して元に戻った場合、更新する必要があります。

これにアプローチする方法についてのご意見はありますか？

Answer 1

は、次の操作を行うことができます：

1. は、keyUpイベント（またはペースト）、入力値の変化にタイマーを設定します。
2. 入力がフォーカスを失う（そして変更された）ときに、すぐに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呼び出しを中断しない場合は、応答を処理するときに無効な値でページを更新します。