使用_.memoize()和_.debounce()

Question

我想取消对特定页面的每个调用的呈现函数--呈现不同的页面将分别退出。回忆录功能应该能起作用，但它不能正常工作。

var renderPage_underscore = function(pageNo){
  var debouncer = _.memoize(
    // memoize function
    _.debounce(
      // debounced function
      function () {
        // Do renderPage() work here
        document.getElementById("underscore").innerHTML += 
            '<br />' + pageNo + '@' +   new Date().getTime();
      },
      1000, // delay
      true
    ),
    // memoize hash function
    function (pageNo) {
        return pageNo;
    }
  );
  return debouncer(pageNo);
}; 

有什么主意吗？http://jsfiddle.net/Zq8Wd/1/

Answer 1

以这种方式使用_.memoize()的问题在于它缓存返回值，而不是副作用。如果您想要使用_.memoize()来解决这个问题，您可能需要这样做：

rp = _.memoize(function (pageNo) {
    return _.debounce(function () {
        document.getElementById("underscore").innerHTML +=
            '<br />' + pageNo + '@' + new Date().getTime();
    }, 1000, true);
});

rp(1)();
rp(2)();

更新的JSFiddle。

Answer 2

我刚想到这个：

/**
 * Memoizes and debounces a function. i.e., returns a new function, that when invoked,
 * returns a Promise that will resolve after `delay` ms unless invoked repeatedly,
 * in which case the last promise will be rejected and the delay will be reset. If the 
 * result has already been computed, will resolve instantly.
 * 
 * @param {Function} func Function to memoize+debounce
 * @param {Number} delay Delay in milliseconds
 * @param {Function} serialize Function used to resolve the cache key
 * @return {Function} Memoized+debounced function.
 */
function membounce(func, delay=333, serialize = x => x) {
    let cache = new Map();
    let timer, cancel, lastKey;
    return (...args) => {
        let key = serialize.call(func, ...args);
        if(timer) {
            clearTimeout(timer);
            cancel(new Error('Debounced'));
            cache.delete(lastKey);
        }
        if(cache.has(key)) {
            return cache.get(key);
        }
        let promise = new Promise((resolve,reject) => {
            cancel = reject;
            timer = setTimeout(() => {
                let result = func(...args);
                resolve(result);
                timer = null;
            }, delay);
        });
        cache.set(key, promise);
        lastKey = key;
        return promise;
    };
}

它总是返回一个Promise，这样您就可以等待它的解决，而忽略任何拒绝，这意味着该值被取消/不计算。