如何实现该函数仅在第 n 次调用的不同去抖动方法

Question

const _debounce = (n, func) => {
    //code here
}
const originFun = () => {
  console.log('hit')
}

const _call = () => _debounce(2, originFun)

_call() //The originFun not executes
_call() //hit
_call() //The originFun not executes
_call() //hit

我不知道如何实现它，即使经过测试。

Answer 1

要跟踪调用次数，您可以使用全局计数器。

此外，您可以使用 spread syntax 将参数传递给您的函数。这样你就可以有多个参数，所有参数都将按顺序传递给函数。

let counter = 1;

const _debounce = (n, func, ...args) => {
    if (counter === n) {
        counter = 1;
        func(...args);
    } else {
        counter += 1;
    }
}

const originFun = (sort) => {
    console.log('hit,', sort)
}

const _call = (sort) => _debounce(2, originFun, sort)

_call(1) //not execute
_call(2) //hit,2
_call(3) //not execute
_call(4) //hit,4

Answer 2

这种去抖动的实现应该对您的用例有所帮助。没有全局变量，并且在纯 javascript.

中实现

function _debounce(func, n){
  let count = 0;
  return (...args) => {
    count++;
    if (count % n === 0) {
        count = 0;
        func.apply(this, args);
    }
  };
}

const originFun = (sort) => {
  console.log('hit,', sort)
}

const _call = _debounce((sort) => originFun(sort), 2);

_call(1) //not execute
_call(2) //hit,2
_call(3) //not execute
_call(4) //hit,4 */
_call(1) //not execute
_call(2) //hit,2
_call(3) //not execute
_call(4) //hit,4 */

Answer 3

_debounce 应该接受排序参数、originFun 函数和 return 自己的函数（或 closure），您可以将其分配给 _call.然后你可以用它自己的参数调用 _call - 数字。

function originFun(sort) {
  console.log('hit,', sort);
}

function _debounce(sort, func) {

  // Set a counter
  let count = 1;

  // Because closures retain the variables from the
  // preceding lexical environment we can
  // still use and update `count` when the function is returned
  // This function (which accepts a number argument) is what's
  // assigned to _call.
  return function(n) {

    // Call originFun with the number if the remainder of dividing
    // sort by count is zero
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder
    if (count % sort === 0) func(n);
    count++;
  }
}

// _debounce returns a function that accepts a number
// argument. We assign that function to _call.
const _call = _debounce(2, originFun);

_call(1) //not execute
_call(2) //hit,2
_call(3) //not execute
_call(4) //hit,4

如何实现该函数仅在第 n 次调用的不同去抖动方法

How to implement a different debounce method that the function only called in the nth time

javascript

debounce