Javascript遅延実行実装方法(setTimeout)_JavaScriptスキル

1.遅延タブ切り替え
要件: ページ上に複数のタブがあり、タブを切り替えると、特定の領域のデータが取得されて更新されます。
欠点: ユーザーが最初のタブから最後まで素早く切り替えると、n 個の ajax リクエストが生成されます。実際、ユーザーは最後のタブのデータを見るだけで済みます。

コードをコピー コードは次のとおりです。

var changeTab = function(){
var timeId = 0;
return function(tabId){
clearTimeout(timeId);
setTimeout(function() {
//ajax do something
},500);
}
}();


の場合、タブに onmouseover をバインドします。ユーザーがタブを前後に切り替え続けると、ajax リクエストは実行されません。500 ミリ秒の一時停止の後にのみ実行されます。500 ミリ秒は実際には非常に短いため、基本的にユーザー エクスペリエンスには影響しません。

2.遅延オートコンプリート

要件: テキスト入力ボックスで、ユーザー入力を監視してオートコンプリート機能を実装します。 欠点: ユーザーが文字を入力するたびに、ajax リクエストが生成されます。ユーザーが長い文字列を入力し続けると、実際には、最後のリクエストが多くなります。 。
コードは上記の例と似ています。

3.遅延スクロール

要件: ページ上の広告は、ユーザーがスクロールした場所に追従する必要があります。 欠点: ユーザーが一番下までスクロールすると、広告の位置を N 回再配置する機能がトリガーされます。実際、ユーザーが停止したときにトリガーする必要があるのは 1 回だけです。
コードは 1 と似ています。
実際、そのような例は数多くあります。すぐに実行する必要がないものは、しばらく遅延する可能性があり、ユーザー エクスペリエンスに影響を与えません。不必要な消費が多い。