手ぶれ補正やスロットル機能の使い方をわかりやすく解説

はじめに

機能の手ぶれ補正とスロットリング、この知識ポイントは面接で質問される可能性が高くなります。

アンチシェイク

アンチシェイクの非即時実行バージョンは、n 回後に関数を 1 回実行するものとして理解できます。アンチシェイクの即時実行バージョンは、関数を即時に実行します。

アンチシェイクの実装

/**
 * @desc 函数防抖
 * @param {Function} func 函数
 * @param {Number} wait 延迟执行毫秒数
 * @param {Boolean} immediate true 表示立即执行，false 表示非立即执行
 */
function debounce(func, wait, immediate) {
  let timeout
  return function () {
    let context = this
    let args = arguments
    if (timeout) {
      clearTimeout(timeout)
    }
    if (immediate) {
      let callNow = !timeout
      timeout = setTimeout(() => {
        timeout = null
      }, wait)
      if (callNow) {
        typeof func === 'function' && func.apply(context, args)
      }
    } else {
      timeout = setTimeout(() => {
        typeof func === 'function' && func.apply(context, args)
      }, wait)
    }
  }
}

スロットリング

スロットリングは、n 回ごとに関数を実行するものとして理解できます。

スロットリングの実装

/**
 * @desc 函数节流
 * @param {Function} func 函数
 * @param {Number} wait 延迟执行毫秒数
 * @param {Boolean} type true 表示时间戳版，false 表示定时器版
 */
function throttle(func, wait, type) {
  let previous
  let timeout
  if (type) {
    previous = 0
  } else {
    timeout
  }
  return function () {
    let context = this
    let args = arguments
    if (type) {
      let now = Date.now()
      if (now - previous > wait) {
        typeof func === 'function' && func.apply(context, args)
        previous = now
      }
    } else {
      if (!timeout) {
        timeout = setTimeout(() => {
          timeout = null
          typeof func === 'function' && func.apply(context, args)
        }, wait)
      }
    }
  }
}

手ぶれ補正とスロットリングの違い

テキスト ボックスを使用してテキストを入力し、時間が 1 秒に設定されている場合、ユーザーは続行します。テキストを入力する場合、非即時手ぶれ補正の場合は、入力が停止されてから 1 秒後に関数が実行され、1 回だけ実行されます。即時手ぶれ補正の場合は、すぐに関数が実行されます。実行されるのは 1 回だけです。スロットリングとは、ユーザー入力中に関数を毎秒 (場合によっては複数回) 実行することを意味します。

アンチシェイクとスロットリングの呼び出しの違い

次のコードのアンチシェイク関数とスロットリング関数は 10000000 回呼び出されますが、アンチシェイク関数は 1 回しか実行されません。しかし、多くのスロットリング機能があります。

let debounceCallback = debounce(function () {
  console.log('debounceCallback')
}, 1000, false)

for (let i = 0; i < 10000000; i++) {
  debounceCallback()
}

let throttleCallback = throttle(function () {
  console.log('throttleCallback')
}, 1000, false)

for (let i = 0; i < 10000000; i++) {
  throttleCallback()
}

推奨チュートリアル: 「JS チュートリアル 」

以上が手ぶれ補正やスロットル機能の使い方をわかりやすく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。