保留中のfnDelay関数

どのプロジェクトを覚えていないという点で、松葉杖のように思える非常に単純な関数を作成したことがあります。 しかし、彼女は義務をうまく果たしました。 それから私はそれを保留中の関数と呼び、JavaScriptはそれをfnDelayと呼びました。 実際、アプリケーションには、状態が変化した後に機能する機能がある場合があります。 ただし、この変更は頻繁に発生する（または仮想的に発生する可能性がある）ため、機能は何度も動作しますが、実際には、既に変更された状態（またはいくつかの中間状態）に対してのみ実行する必要があります。 そうしないと、アプリケーションのパフォーマンスに微妙な問題がある可能性があります。 さて、十分な空の言葉、具体的な例を分析します。



非同期検索があり、テキストが文字入力フィールドに入力され、検索結果が自動的に更新されます。 一見複雑ではありません。新しいフレーズの新しい検索がトリガーされると、入力にキーアップイベントがハングアップします。

document.getElementById('search').addEventListener('keyup', function() { //       search,   ,     search(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、リクエストが実行されている間、ユーザーは次の文字を入力する時間がある場合があり、その後、前のリクエストの結果は無関係であり、新しいリクエストは前のリクエストが終了するまで実行されません（ここでは、XHRリクエストをキャンセルできることを偽装していますが、これは特別なケースです）。 ユーザーが「カンボジアへの格安チケット」というフレーズをすばやく入力したとします。 この場合、検索関数は25回呼び出されます。 これは不要です。 一方、ユーザーがあまり速く入力しない場合、中間オプションを表示するのは良いことであり、結果を表示する前に遅延があることは依然として望ましくありません。



このために、「保留機能」が最初に発明されました。 彼女は、周期的な呼び出しが終了するまで待機します。 呼び出し後に設定時間が経過し、この関数が再度呼び出されない場合は実行されます。それ以外の場合、アクションは次の呼び出しに渡されます。

 fnDelay = (function(){ var timer = 0; return function(callback, ms){ clearTimeout(timer); timer = setTimeout(callback, ms); }; })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてすぐにそれを使用する方法を示します。

 document.getElementById('search').addEventListener('keyup', function() { fnDelay(function() { search(); }, 200); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数のパフォーマンスは、ms引数によって制御されます。 特定のケースごとに、結果が応答し、未処理のタスクのキューが蓄積されないように、中間点を探す必要があります。 これで、ユーザーがエントリ中に少なくとも200ミリ秒一時停止すると、新しい結果を受け取ります。 したがって、検索関数の呼び出し回数を大幅に削減します。



ページのサイズを変更するときに何かをする必要があるとき、同じ機能を使用して非同期検索で停止しませんでした。ウィンドウの幅を100ピクセルだけ変更すると、サイズ変更イベントが何十回も発生する可能性があります。



また、例とともに小さなフィドルへのリンクを追加します。