ホームページ >ウェブフロントエンド >フロントエンドQ&A >vue手ぶれ補正とは何ですか?
vue手ぶれ補正とは何ですか?
- 青灯夜游オリジナル
- 2022-07-20 18:46:282202ブラウズ
vue では、アンチシェイクとは、イベントがトリガーされてから n 秒後にコールバックを実行することを意味します。この n 秒以内に再度トリガーされると、時間が再開されます。つまり、イベントが継続したときです。一定時間内にイベントが再度トリガーされなかった場合、イベント処理関数は 1 回だけ実行され、設定された時間間隔が経過する前にイベントが再度トリガーされると、遅延が再開されます。
デバウンス
イベントがトリガーされてから n 秒後にコールバックを実行します。この n 秒以内に再度トリガーされた場合は、時間を再設定します; 説明: イベントが継続的にトリガーされ、一定の時間間隔内に再度イベントがトリガーされなかった場合、イベント処理関数は 1 回実行されます。設定された時間間隔に達する前に再度イベントがトリガーされた場合、イベントは実行されます。 、遅延が再び始まります。 一般的に理解されているのは、クリック リクエストまたはクリック ロード プロセス中に 1 回クリックするだけでよいということですが、リクエストが遅いため、何度もクリックすることになり、結果として複数のリクエストが発生します。アンチシェイクは何度もクリックした後に行われます。 . は最後にのみ要求されます。ケース 1:
スクロール イベントが継続的にトリガーされると、ハンドル関数はすぐには実行されません。スクロール イベントが 1000 ミリ秒以内にトリガーされないと、ハンドル関数は実行されません。遅延して 1 回トリガーされるハンドル関数。function debounce(fn, wait) {
let timeout = null
return function() {
if(timeout !== null) clearTimeout(timeout)
timeout = setTimeout(fn, wait);
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))addEventListener の 2 番目のパラメータは、実際にはデバウンス関数の return メソッドです。タイムアウト = null にします。このコード行は、addEventListener がイベントをトリガーするときに 1 回だけ実行されます。その後は、スクロール イベントが発生するたびに実行されます。トリガーされると、最後のディレイラーがクリアされ、新しいディレイラーが記録されます。スクロール イベントがトリガーを停止すると、最後に記録されたディレイラーはクリアされず、遅延することができます。これがデバウンス機能の原理です。
ケース 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
输入内容：<input type="text" @keyup="deb"/>
<div> 输入次数：{{num}}</div>
</div>
<script>
let time
var app=new Vue({
el:'#app',
data:{
num:0,
},
methods:{
deb: function () {
let that = this
if (time) {
clearTimeout(time)
}
time = setTimeout(function () {
that.num++
console.log('输入了'+that.num+'次')
time = undefined;
}, 2000)
}
}
})
</script>
</body>
</html>レンダリング: (テキストを 1 回入力し、2 秒後に実行します。複数回入力しても 1 回のみ実行されます。入力回数は1 だけ増加します): グローバルに定義された時間は不定です。連続入力プロセス中に、キーアップ イベントが複数回トリガーされ、そのたびにタイマーが再レンダリングされます。入力間隔が超過した場合のみです。設定された時間 2 秒 (または等しい) で num が実行されます。
<div id="app">
输入内容：<input type="text" class="input" @keyup.enter="deb"/>
<div> 输入次数：{{num}}</div>
</div> このようにして、Enter キーを押し続けると、入力が 1 つだけトリガーされます。を押す時間 キャリッジリターン間隔が 2 秒に設定されている場合、1 回だけトリガーされます。 そのため、送信ボタンをクリック・タッチし続けることを考慮すると、手ぶれ補正が必要になります。 もちろん、他の解決策もあります。たとえば、プロジェクトではコントロール ボタン メソッドが使用されています。[保存] をクリックします。リクエスト インターフェイスが 200 を返す前に、ボタンの使用が禁止されるため、繰り返しクリックされることはありません。 。 【おすすめの関連ビデオ チュートリアル: vue ビデオ チュートリアル 、Web フロントエンドの入門 ]
以上がvue手ぶれ補正とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。