0

下面的代码模拟了通过debounce 函数执行实时搜索（替换为控制台输出）。

debounce 函数被调用，但传递的liveSearch函数没有被调用。我猜是因为debounce返回了一个没有被执行的函数。

我怎样才能liveSearch以这样的方式调用它实际上是去抖动的？

var MySearch = (function($) {
    var $search = $('.search'),
        searchDelay = 500,
        keysToIgnore = [8, 16, 17, 18, 27, 32, 37, 38, 39, 40, 91, 191, 220]; // space, esc, bkspc, ctrl, alt, cmd, arrows, /\

    function init() {
        $search.on('keyup', function(e) {
            if (keysToIgnore.indexOf(e.keyCode) == -1) {
                // FIXME: this isn't actually executing the passed liveSearch fn
                debounce(liveSearch, searchDelay);

                // This executes liveSearch, but doesnt debounce
                // debounce(liveSearch, searchDelay)();
            }
        });
    }

    function liveSearch() {
        console.log("searching:", $search.val());
    }

    // Remy's debounce func: 
    // https://remysharp.com/2010/07/21/throttling-function-calls
    function debounce(fn, delay) {
        console.log("debouncing for", delay);

        var timer = null;

        return function () {
            var context = this,
                args = arguments;

            clearTimeout(timer);

            timer = setTimeout(function () {
            fn.apply(context, args);
            }, delay);
        };
    }

    return {
        init: init
    };
}(jQuery));

jQuery(function() {
    MySearch.init();
});

http://codepen.io/bbodien/pen/BpWBXm?editors=0010

4

1 回答 1

1

每次调用debounce都会创建自己的带有timer变量的闭包。因此，该debounce函数被设计为被调用一次并返回一个应该被调用的函数，而不是liveSearch：

  function init() {
    var debouncedLiveSearch = debounce(liveSearch, searchDelay);

    $search.on('keyup', function(e) {
      if (keysToIgnore.indexOf(e.keyCode) == -1) {
        debouncedLiveSearch();
      }
    });
  }
于 2017-01-19T17:33:52.393 回答