スクロールイベントの多重実行を防ぐJavaScriptの考え方と実装_JavaScriptスキル

これは主に、一般的な Web ページの一部の特殊効果が、JS 解析中に異なる期待と効果をもたらすという問題を解決するために書かれています。

元のコード:

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

//テストコード
window.onscroll = function(){
alert("haha")
}

スクリプトタグにインストールして考え続けることができます
マウスをスライドさせた後にプロンプ​​トボックスが表示されるため、非常に不便です。また、目的は、マウスをスライドさせた後にイベントを 1 回だけ実行することです。この効果は明ら​​かに実際の状況と矛盾しています。

//コードの改善 -- 遅延器を追加します。
スクロールイベントは連続トリガーイベントなので、ユーザーがマウスをスライドさせた後に関数を実行するように遅延を設定しましたが、一度だけ実行することはできませんか?

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

//テスト コード:
関数haha() {
alert("haha");
}
window.onscroll = function(){
setTimeout(haha,500);

結果 上記のようにまだ多くの警告ボックスが表示されることがわかりました。スクロールイベントがキューのように一列に並んで順番に実行されていることがわかります。そのため、この方法はブロックされているため、次のようにする必要があります別の方法を見つけてください。

条件によってイベントの実行を制御するのは良い方法です

コードをコピーします コードは次のとおりです:

function haha​​(){
alert("haha");
}
var = true; //条件を作成
window.onscroll = function(){
if(tur){ setTimeout(haha,500); }
else
{}
}

幸いなことに、このコードはマウスのスクロールの問題 マウスを再度スクロールすると、イベントは実行されなくなります。
その理由は、条件が false に設定されているため、後続のイベントは実行されないためです。

アイデアは、条件判断と遅延実行がこの問題を解決できるというものです。イベント実行の開始時に変数が復活し、イベントの完了後に変数が強制終了されます。

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

var tur = true; haha() {alert("haha"); }

window.onscroll = function(){
if(tur){ setTimeout(haha,1000); 🎜>} else{ }
}