Question

最近的React.JS Conf基于调度循环优化，使用Flux面板和Kyle Davis mentioned去抖动调用。任何人都可以提供一些如何实现它的例子吗？

Answer 1

我的理解是它看起来像这样：

function debounce(duration) {
    var _timer = null;
    var toCall = [];

    function dispatch() {
        _timer = null;
        toCall.forEach(function(opts) {
            if (opts.shouldCall) {
                opts.fn.apply(undefined, opts.args);
            }
            opts.shouldCall = false;
        });
    }

    return function debounce(fn) {
        var myAction = {fn: fn, args: [], shouldCall: false};
        toCall.push(myAction);

        return function() {
            myAction.shouldCall = true;
            myAction.args = Array.prototype.slice.call(arguments);

            clearTimeout(_timer);
            _timer = setTimeout(dispatch, duration);
        };
    };
}

这看起来相当复杂，但实际上它只是一个只有共享的共享辩护。多个函数在同一个计时器上被去抖动，并且所有函数都在相同的时钟中被调用。保留了最新的参数（在这种特定情况下不需要，但它不会导致问题）。

我们为所有商店（不是每个商店）创建其中一个。持续时间大多是任意的，但足够长，允许浏览器在我们执行商店更新逻辑和UI更新之间渲染一个框架，这可能使滚动感觉更敏感。

var storeDebounce = debouncer(20);

在我们的商店中，而不是：

  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },

我们这样做：

  emitChange: storeDebounce(function() {
    this.emit(CHANGE_EVENT);
  }.bind(this)),

现在，如果一个或多个商店在相同的时间段内更新多次，或者连续次数较少（通常在promises或其他有保证的异步代码中发生），我们只会为每个受影响的商店发出一个更改事件。

^{免责声明：未经过测试}

基于React中的调度循环去抖动调用

1 个答案: