[JS]lodashで戻り、Throttle with lodash

返品

連続呼び出しの関数の最後(または最初)のみが呼び出されます.

どうして使いますか。

クエリーの自動完了機能を実装する方法を考えてみましょう.
ぽたぽたぽたぽた
「Debounce」を検索し、無意味にapiを9回呼び出すと、多くのリソースが浪費されますか?
このとき、すべての呼び出しのイベントコールバックは実行されず、最後の呼び出しのみがdisbounceを実行します.

使用例

ajaxリクエスト、大きいサイズなど...

インプリメンテーション

const debounce = (callback, delay) => {
	let timer;
	return event => {
		if (tiemr) clearTimeout(timer);
		timer = setTimeout(callback, delay, event);
	};
};

制限

最後の関数を呼び出してからしばらくしてから再度呼び出さないでください.

どうして使いますか。

無限スクロールを実現するためにスクロールイベントを受信する場合を考慮する.
1 pxをスクロールするたびにロールバックイベントコールバックが実行されると、ブラウザがオーバーロードします...
ブラウザには他にもやることがたくさんあるので、このようなイベントコールバックは通常、一定時間おきに実行する必要があります.

使用例

無限スクロール、地図移動など...

インプリメンテーション

function throttle(callback, delay) {
  let timer
  return event => {
    if (timer) return;
    timer = setTimeout(() => {
        callback(event);
        timer = null;
      }, delay, event)
	}
}

lodashのdebonse,thrott

JavaScript deep deep bookでは、上のコードが空です.より深い機能を使用したい場合は、lodashライブラリを閉じてください.
そこで調べてみると、機能をより細かく調整して使うことができるオプションをくれました.

_.debounce

_.debounce(func, [wait=0], [options={}])

options
[option.leadind=false]:trueの場合、最初の励起イベントが最初に実行されます.
[option.maxWait]:関数呼び出しの最大遅延時間.
[options.traund=true]:これが本当である場合、関数

は、最後のイベントが発生してからしばらく待機した後に実行されます.
options.maxWaitはdebonse+throttleの組み合わせに設定されています.waitアプリケーションdebonse遅延、maxWaitアプリケーションイベント最大呼び出しサイクル
したがって、スロットルコードを見ると、wait == maxWaitのdebonse関数によって実現される.

コード原文(ピークライスに注意)

function debounce(func, wait, options) {
  var lastArgs,
      lastThis,
      maxWait,
      result,
      timerId,
      lastCallTime,
      lastInvokeTime = 0,
      leading = false,
      maxing = false,
      trailing = true;

  if (typeof func != 'function') {
    throw new TypeError(FUNC_ERROR_TEXT);
  }
  wait = toNumber(wait) || 0;
  if (isObject(options)) {
    leading = !!options.leading;
    maxing = 'maxWait' in options;
    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
    trailing = 'trailing' in options ? !!options.trailing : trailing;
  }

  function invokeFunc(time) {
    var args = lastArgs,
        thisArg = lastThis;

    lastArgs = lastThis = undefined;
    lastInvokeTime = time;
    result = func.apply(thisArg, args);
    return result;
  }

  function leadingEdge(time) {
    // Reset any `maxWait` timer.
    lastInvokeTime = time;
    // Start the timer for the trailing edge.
    timerId = setTimeout(timerExpired, wait);
    // Invoke the leading edge.
    return leading ? invokeFunc(time) : result;
  }

  function remainingWait(time) {
    var timeSinceLastCall = time - lastCallTime,
        timeSinceLastInvoke = time - lastInvokeTime,
        timeWaiting = wait - timeSinceLastCall;

    return maxing
      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
      : timeWaiting;
  }

  function shouldInvoke(time) {
    var timeSinceLastCall = time - lastCallTime,
        timeSinceLastInvoke = time - lastInvokeTime;

    // Either this is the first call, activity has stopped and we're at the
    // trailing edge, the system time has gone backwards and we're treating
    // it as the trailing edge, or we've hit the `maxWait` limit.
    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
  }

  function timerExpired() {
    var time = now();
    if (shouldInvoke(time)) {
      return trailingEdge(time);
    }
    // Restart the timer.
    timerId = setTimeout(timerExpired, remainingWait(time));
  }

  function trailingEdge(time) {
    timerId = undefined;

    // Only invoke if we have `lastArgs` which means `func` has been
    // debounced at least once.
    if (trailing && lastArgs) {
      return invokeFunc(time);
    }
    lastArgs = lastThis = undefined;
    return result;
  }

  function cancel() {
    if (timerId !== undefined) {
      clearTimeout(timerId);
    }
    lastInvokeTime = 0;
    lastArgs = lastCallTime = lastThis = timerId = undefined;
  }

  function flush() {
    return timerId === undefined ? result : trailingEdge(now());
  }

  function debounced() {
    var time = now(),
        isInvoking = shouldInvoke(time);

    lastArgs = arguments;
    lastThis = this;
    lastCallTime = time;

    if (isInvoking) {
      if (timerId === undefined) {
        return leadingEdge(lastCallTime);
      }
      if (maxing) {
        // Handle invocations in a tight loop.
        clearTimeout(timerId);
        timerId = setTimeout(timerExpired, wait);
        return invokeFunc(lastCallTime);
      }
    }
    if (timerId === undefined) {
      timerId = setTimeout(timerExpired, wait);
    }
    return result;
  }
  debounced.cancel = cancel;
  debounced.flush = flush;
  return debounced;
}

_.throttle

_.throttle(func, [wait=0], [options={}])

options
[option.leadind=false]:trueの場合、最初の励起イベントが最初に実行されます.
[option.ドラッグ&ドロップ=true]:これがtrueの場合、最後のイベントが発生してからしばらく待ってから関数を実行します.

コードテキスト

function throttle(func, wait, options) {
  var leading = true,
      trailing = true;

  if (typeof func != 'function') {
    throw new TypeError(FUNC_ERROR_TEXT);
  }
  if (isObject(options)) {
    leading = 'leading' in options ? !!options.leading : leading;
    trailing = 'trailing' in options ? !!options.trailing : trailing;
  }
  return debounce(func, wait, {
    'leading': leading,
    'maxWait': wait,
    'trailing': trailing
  });
}

サマリ

で連続的に発生する可能性のあるイベントの実行回数を減らし、パフォーマンスを向上させるために、ジッタ、ドラッグアンドドロップ技術が使用されている.

分機は、連続したイベント呼び出しで最後の呼び出しのみを実行する.

手書き体は、一定時間ごとに連続したアクティビティを実行する.

コメントリンク
https://lodash.com/docs/4.17.15