JS画像安定化とスロットル

今日では、手書き入力のチェックボックスは、突然、いくつかの理解と記憶を深め、特別に書き留めスロットル、何も考えずに長い時間、メモリがあいまいである、との画像安定化を思い出しました

まず、手ぶれ補正とスロットルをしているのですか？

例えば、入力ボックスを書いて、あなたは手書きをチェックする必要があり、私たちの一般的なアプローチあなたが失うフォーカスの入力が完了したときに、私たちはフォーカスイベントの外に耳を傾ける必要が、再び確認し、チェックするために、今より多くの一般的な方法は、あなたは意志が入力されていることですエラーをチェックしていますが、入力したとき、各文字は、我々はそれを行う、それは手ぶれ補正を使用する必要がありますどのようにして、明らかに不適切、チェックするために行ってきました。

背景データへのロケーション要求へのスクロールが、これは圧延荷重を絞ることによって達成することができ圧延荷重、より一般的な使用は、あります

次に、どのように

1.手ぶれ補正（トリガーがない場合の時間が、実行され、その後、タイマーを使用して）

関数デバウンス（FN、待機）{    
     VARのタイムアウト= NULL ;    
    リターン 機能（）{        
         場合（！タイムアウト== nullの）てclearTimeout（タイムアウト）。        
        タイムアウト = setTimeoutメソッド（FN、待ちます）。    
    } 
} 

window.addEventListener（ 'スクロール'、デバウンス（試験、1000））。

2.スロットル

タイムスタンプ：

VaRのスロットル= 関数（楽しい、遅延）{            
　　VARの PREV = Date.now（）。            
　　戻り 関数（）{                
　　　　VARの _this = この;                               
　　　　VAR今= Date.now（）;                
　　　　もし（現在- PREV> = 遅延）{                     
　　　　　　fun.apply（_this、引数）。                    
　　　　　　PREV = Date.now（）。                
　　　　}             
　　}         
}         
     
window.addEventListener（ 'スクロール'、スロットル（試験、1000））。

すぐに機能が、遅延未満の最後の時間を実行します初めて、タイマーを使用して、実行されません

タイマー：

VaRのスロットル= 機能（楽しい、遅延）{            
     VARタイマー= nullを。            
    戻り 関数（）{                
         VARの _this = この;                            
        もし（！のタイマー）{                     
            タイマ = setTimeoutメソッド（関数（）{                         
                fun.apply（_this、引数）;                         
                タイマー = NULL ;                     
            }、遅延）。                
        }            
    }         
}        
         
window.addEventListener（ 'スクロール'、スロットル（試験、1000））。

最初のトリガ・イベントが、機能がすぐに実行されませんが、唯一の実行遅延秒後に、起因する遅延タイマの遅延に、時に最後の時間をトリガーするだけでなく、機能を実行すると、少し不完全

タイムスタンプ+タイマー：

VaRのスロットル= 機能（楽しい、遅延）{     
     VARタイマー= nullを。     
    VARのstartTime = Date.now（）。     
    戻り 関数（）{             
         VARの CURTIME = Date.now（）。             
        VaRの t_delay =遅延- （CURTIME - のstartTime）。             
        するvar _this = この;                          
        clearTimeout（タイマー）。              
        もし（残り<= 0 ）{                      
            fun.apply（_this、引数）。                    
            たstartTime = Date.now（）。               
        } 他{                     
            タイマー = のsetTimeout（楽しい、t_delay）。              
        }       
    } 
} 
window.addEventListener（ 'スクロール'、スロットル（試験、1000））。

最後のトリガ時間は、トリガーを完了するためにタイマーを使用して、遅延未満であると、すぐに実行を解決するための第一の問題点

要約：

画像安定化：イベントがトリガされた後、一定の期間にトリガされていない、彼らはイベント中にトリガされた場合、機能を実行し、リタイミング

スロットリング：イベントがトリガされた後、一定期間内のことを確認するために、機能を実行するようにしてください

おすすめ