JS関数スロットルの使い方の紹介（コード例）

この記事では、JS 関数のスロットリングの使用法 (コード例) を紹介します。必要な方は参考にしてください。

今では、JavaScript の用途は実に幅広く、好きな人が何をしているかをビデオ監視するなど、何でもできそうな気がします。いやいや、これは違法です。 、 いいえ。

私は最近仕事でニーズに遭遇しました。元々は PC 側のフレームワーク構成の要件でしたが、リーダーから突然 PC 側でモバイル サイズに対応するように頼まれました。すぐに頭が痛くなりました。すべて使用されています ピクセル単位です、それは良くありません、それは本当に痛いです、そしてブラウザウィンドウが変更されたときにいくつかのページ要素のサイズを変更する必要があると思いました
元のサイズ

モバイル用に設定する その時、

function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}

その後、ウィンドウをドラッグしてコンソールを見てみると、実際には 50 回印刷されました。これは私が望むものではありません。関数のコードは一度実行するだけで済むため、複雑になる可能性があります。
オンラインで検索したところ、高度な JavaScript プログラミングでこの問題に対処するための関数スロットリングが存在しました。

原理は非常に簡単で、関数の実行を 500 ミリ秒遅らせることができます。この関数を 500 ミリ秒以内に実行すると、呼び出されると、前の呼び出しは削除され、この呼び出しは 500 ミリ秒後に実行され、以下同様になります。

let n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}

function fn(cb,context){
clearTimeout(cb.Tid);
cb.Tid=setTimeout(function(){
    cb.call(context);
},500);
}

window.onresize=function(){
fn(resizehandler,window);
};

これにより、目的の効果が達成されます

以上がJS関数スロットルの使い方の紹介（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。