无法在具有参数的函数中实现去抖动

Question

我正在尝试在每次用户在自动完成框中键入内容时调用的 API 函数中实现去抖动。但不知何故，当我输入一些东西时，它会调用主 API 函数而不是去抖函数。下面是代码：$scope.searchTextChange = function(searchText){debounceSearch(getAllIds(searchText),1000); //getAllIds get called everytime upon keyboard input}const debounceSearch= (callback, delay) => {  let timeout = null;  return (...args) => {    const next = () =>     callback(...args);    clearTimeout(timeout);    timeout = setTimeout(next, delay);  }}

Answer 1

当您debounceSearch在此代码块中启动时调用它，您实际上是在调用getAllIds.

$scope.searchTextChange = function(searchText){

  debounceSearch(getAllIds(searchText),1000); 

}

更好的方法是使范围searchTextChange去抖动，例如：

$scope.searchTextChange = debounceSearch( function(searchText) {

  getAllIds(searchText); 

}, 1000);

这将一起解决你的问题，并通过阅读代码清楚地表明它searchTextChange被去抖动（警告如果你有一些对this上下文的调用，你应该将回调绑定到 this 或使用箭头函数）

const elem = document.getElementById('searchInput');

const result = document.getElementById('results');

// taken from: https://davidwalsh.name/javascript-debounce-function

function debounce(func, wait, immediate) {

    var timeout;

    return function() {

        var context = this, args = arguments;

        var later = function() {

            timeout = null;

            if (!immediate) func.apply(context, args);

        };

        var callNow = immediate && !timeout;

        clearTimeout(timeout);

        timeout = setTimeout(later, wait);

        if (callNow) func.apply(context, args);

    };

};

elem.addEventListener('keypress', debounce( search, 1000 ) );

function search( e ) {

  results.innerText += 'You\'ve searched for ' + e.target.value;

}

<input type="text" id="searchInput" />

<div id="results"></div>