手ぶれ補正スロットリング
機能スロットル
この機能は単位時間内に 1 回のみトリガーできると規定されています。この単位時間内に関数が複数回トリガーされた場合、有効になるのは 1 回だけです。
スロットルとは、イベントがバインドされた後、アクションによってイベントがトリガーされることを意味します。この期間中にアクションが再び発生した場合、イベントが実行されるまでアクションは無視され、再トリガーされる前に実行されます。平たく言えば、高頻度の実行数を制御することです。
スロットルアプリケーションのシナリオ
スロットルは、多数のイベントが均等に分散され、時間によってトリガーされる場合に適しています。
- もう一つは、ナゲッツがここで記事を書いているのと同じように自動保存機能があり、書いている間、一定時間ごとに保存することができます。
- DOM 要素のドラッグ アンド ドロップなどの残りの操作や、ゲーム内のリフレッシュ レートには、スロットル機能が使用されます。
手書き機能の調整
// 需求： 1. 鼠标在盒子里面滑动，让盒子里面的数字累加
// 需求： 2. 封装节流函数throttle， 将mouseMove进行包装
// 需求： 3. 有间隔的调用mouseMove函数，然我们的页面每个固定时间累加
const boxDom = document.querySelector('.box')
let count = 1
function mousemove() {
count++
boxDom.innerHTML = count
}
// 节流throttle-是函数， 是一个优化函数执行的流程， 减少代码不必要的执行，提升性能
function throttle(fn, time) {
// 节流throttle注意点:
// 1.节流函数一定要有返回值， 并且返回值是一个函数
// 2.要用节流， 就必须有 开始时间 当前时间（结束时间）
let startTime = +new Date() // 开始时间
return function () {
let currentTime = +new Date() // 结束时间（最后的时机）
if (currentTime - startTime > time) {
//就是我们的当前时间和 开始时间相减，如果结果大于间隔时间，就可以进行下一步的函数执行这个判断条件意思是,如果鼠标两次滑动的时间大于1秒钟才会调用fn,如果鼠标两次滑动的时间太快,小于1秒钟,就不让fn执行.
fn()
startTime = currentTime // 每次滑动以后，将最后的时间 从新赋值给 开始时间
}
}
}
//绑定事件, mouseMove 是用户一滑动就会执行，(但用户滑的太快会造成性能浪费,所以我们要给用户的鼠标滑动再设置一个条件,用节流规定两次操作的间隔时间,大于这个间隔时间才执行)
// boxDom.addEventListener('mousemove', mousemove)
boxDom.addEventListener('mousemove', throttle(mousemove, 1000))
機能スロットルとは個人的な理解 fpsゲームの連射速度のことで、マウスを押し続けて射撃しても指定された連射速度以内の弾しか発射されません。
関数デバウンス（デバウンス）
手ぶれ補正とはその名の通り、手ぶれを防ぐことだと理解できます。イベントを頻繁にトリガーすると、不必要なパフォーマンスの損失が発生するため、パフォーマンスの損失を軽減するには、イベントがトリガーを停止した後にイベントをトリガーさせる必要があります。
アンチシェイクとは実行を遅らせることであり、トリガーイベントは常に動作させて実行せず、動作が停止した後にのみ実行されます。
コールバックは、イベントがトリガーされてから n 秒後に実行され、この n 秒以内に再度トリガーされると、タイマーが再起動されます。動作停止時のみ実行
手ぶれ補正の応用シナリオ
手ぶれ補正は、複数のイベントに一度に応答する場合に適しています。
- 典型的な例は検索検索の関連付けであり、ユーザーが連続して値を入力する場合、アンチシェイクを使用してリクエストのリソースを節約します。手ぶれ補正を追加した後、頻繁に入力があった場合にはリクエストは送信されず、指定した間隔内に入力がなかった場合にのみ機能が実行されます。入力が停止しても、指定された間隔内に再度入力されると、タイマーが再トリガーされます。
- ボタンのクリックイベントもあり、ユーザーが繰り返し送信することを防ぐために、手ぶれ補正機能も使用されます。
- 最後は電話番号入力の一部の検証ですが、入力を中止するまで検証されません。
手書き機能手ぶれ補正
const boxDom = document.querySelector('.box')
let count = 1
function mousemove() {
count++
boxDom.innerHTML = count
}
// 防抖 debounce (辅助理解节流)
// 节流 throttle(工作重点) --- 因为工作里面，我们会用lodash， lodash里面的防抖和节流就叫这个名字
// 思想:将一些变量，全部换成函数的形参， 通过外面传递参数进来，再写代码
function debounce(fn, time) {
let timerId
return function () {
// console.log(1111)
// 下一次滑动开始之前，要先将之前的定时器清除,不然的话一直滑动一直生成定时器,多个定时器叠加在一起.
clearTimeout(timerId)
// 定时器里面的函数，需要2S种以后才会执行，
// 如果滑动太快，2秒以内，又滑动了我们的鼠标，就会进入函数debounce(fn, time){}， 首先清空上一次的定时器
// 只有当两次滑动的间隔，大于了2s, 定时器里面的回调函数才会执行
timerId = setTimeout(function () {
fn()
}, time)
}
}
// boxDom.addEventListener('mousemove', mousemove)
// 往高级前端发展， 就要学会 将函数作为参数， 以及将函数作为返回值！！！
boxDom.addEventListener('mousemove', debounce(mousemove, 1000))
// boxDom.addEventListener('mousemove', function() {
// mousemove()
// })
//这个代码和上面一样
どれだけ速くても、実行されるのは常に 1 秒に 1 回だけです。
機能スロットルとは個人的な理解 fpsゲームの連射速度のことで、マウスを押し続けて射撃しても指定された連射速度以内の弾しか発射されません。
概要と比較
- アンチシェイク機能と機能スロットル機能は両方とも、特定の時間に頻繁にトリガーされるのを防ぎますが、この 2 つの兄弟の原理は異なります。
- ファンクションスロットリングは、指定された流量で一定間隔で実行されます。手ぶれ補正機能は一定時間に1回しか実行されず、速度が速すぎて実行できません。