javascriptでライブ検索を実行していません閉鎖を実行しません

Question

以下のコードはdebounce functionでライブ検索（コンソール出力と置き換えられます）の実行をシミュレートしています。

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

Answer 1

debounceの各呼び出しはtimer変数を持つ独自の閉鎖を作成します。したがってdebounce関数が一度呼び出されるように設計され、代わりにliveSearchから呼び出されるべき機能を返している。

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

    $search.on('keyup', function(e) { 
     if (keysToIgnore.indexOf(e.keyCode) == -1) { 
     debouncedLiveSearch(); 
     } 
    }); 
    }