こんにちは、インタビュー中に手ブレ防止機能を手書きで書くように求められる友人もいますが、多くの人は困惑しています。
今日はあなたを征服に連れて行きましょう！
1.手ぶれ防止
アンチシェイク: イベントは単位時間ごとに頻繁にトリガーされ、最後の時間のみが実行されます。
人の言葉：ぶっちゃけ、防振とは街に戻ることであり、中断された後に再計算されます。
2. 防振ケース
防振について説明するためにケースを使用します。
機能上の目標: マウスがボックスの上をスライドし、ボックス内の数字が +1 になるまでに 500 秒かかります
3.手ぶれ防止の2つの使い方
3.1 手書きの手ぶれ防止
核となるアイデア:
1.手ぶれ補正の核心はタイマーを使うことです（達成するにはsetTimeout）
2.マウスが毎回スライドするときは、まずタイマーがあるかどうかを判断し、タイマーがある場合は、最初に前のタイマーをクリアします。
3. タイマーがない場合は、タイマーを開始し、それを変数に格納することを忘れないでください。
4. タイマーで実行する関数を呼び出します。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
let i = 1 // 让这个变量++
// 鼠标移动函数
function mouseMove() {
box.innerHTML = ++i
// 如果里面存在大量操作 dom 的情况，可能会卡顿
}
// 手写的防抖函数
function debounce(fn, t) {
let timeId
return function () {
// 如果有定时器就清除
if (timeId) clearTimeout(timeId)
// 开启定时器 200
timeId = setTimeout(function () {
fn()
}, t)
}
}
// box.addEventListener('mousemove', mouseMove)
box.addEventListener('mousemove', debounce(mouseMove, 200))
</script>
</body>
</html>
//核心分析:
1.return一个函数的目的：
如果没有return一个函数的时候,当页面一加载的时候就会立即执行addEventListener中的debounce,这样以后再触发事件的时候就不会再执行addEventListene事件的回调函数了。
如果有return一个函数的时候,那么页面一上来调用debounce后就会返回一个function,那么每次执行mousemove后就会触发这个回调函数，这样就能保证每次触发事件后，回调函数也触发。
2.防抖的核心就是重新计时，所以先判断是否有定时器，有了就清除。然后开启一个定时器，在延时时间到了以后再触发fn();3.2 lodash.js
1.lodash.js をインストールする
cnpm i lodash --save2.ロダッシュを導入する
import _ from 'lodash'3. 使用 (vue3 で)
<div @mousemove='moveFn'></div>
let moveFn=_.debounce(()=>{
console.log("事件触发200ms后会打印");
},200)4. 手ぶれ補正の使用シーン
1. 検索ボックスへの入力: 検索ボックスにキーワードを入力します。キーワードを入力せずにサーバーに要求したくない場合は、入力後にサーバー要求を行うことができます。
2. 携帯電話番号と電子メールの入力検出。
さっさと練習しろ、デイ兄弟、練習しないとダメだ！
私をサポートすることを忘れないでください、わかりました、ペアで良いことを願っています~~~~~~