vue手ぶれ補正とは何ですか?-フロントエンドQ&A-php.cn

vue手ぶれ補正とは何ですか?

青灯夜游

リリース： 2022-07-20 18:46:28

オリジナル

2166 人が閲覧しました

vue では、アンチシェイクとは、イベントがトリガーされてから n 秒後にコールバックを実行することを意味します。この n 秒以内に再度トリガーされると、時間が再開されます。つまり、イベントが継続したときです。一定時間内にイベントが再度トリガーされなかった場合、イベント処理関数は 1 回だけ実行され、設定された時間間隔が経過する前にイベントが再度トリガーされると、遅延が再開されます。

vue手ぶれ補正とは何ですか?

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vue プロジェクトの最適化に関しては、手ぶれ補正のスロットルを理解する必要があります。手ぶれ補正について話しましょう。

デバウンス

イベントがトリガーされてから 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(&#39;scroll&#39;, 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:&#39;#app&#39;,
            data:{
                num:0,
            },
            methods:{
                deb: function () {
let that = this
if (time) {
clearTimeout(time)
}
time = setTimeout(function () {
                            that.num++
console.log(&#39;输入了&#39;+that.num+&#39;次&#39;)
time = undefined;
}, 2000)
}
            }
        })
    </script>
</body>
</html>

ログイン後にコピー

レンダリング: (テキストを 1 回入力し、2 秒後に実行します。複数回入力しても 1 回のみ実行されます。入力回数は1 だけ増加します):

グローバルに定義された時間は不定です。連続入力プロセス中に、キーアップイベントが複数回トリガーされ、そのたびにタイマーが再レンダリングされます。入力間隔が超過した場合のみです。設定された時間 2 秒 (または等しい) で num が実行されます。

vue手ぶれ補正とは何ですか?

キーボード修飾子の場合: (例として .enter)

    <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 サイトの他の関連記事を参照してください。