如何覆盖/取消先前调用的承诺？

Question

我有响应用户键盘按下的 jQuery 代码，我正在检查元素是否在视图中。如果用户非常快地按下键或按住它（现在它对我的代码来说太快了），插件会返回承诺，它会在循环中创建承诺。我想在打电话给新的承诺之前取消之前的承诺。

我想出了这个忽略先前承诺的代码：

var scroll_callback_counter = 0;
function move_cursor_visible() {
    var cursor = self.find('.cursor');
    var i = scroll_callback_counter++;
    return cursor.is_fully_in_viewport(self).then(function(visible) {
        if (i === scroll_callback_counter && !visible) {
            var offset = cursor.offset();
            var container_offset = self.offset();
            self.scrollTop(offset.top - container_offset.top - 5);
            return true;
        }
    });
}

有没有更好的方法？它有效，但我不知道这是否是创建取消/忽略承诺回调的代码的正确方法。

编辑：

这里是is_fully_in_viewport函数：

function jquery_resolve(value) {
    var defer = jQuery.Deferred();
    defer.resolve(value);
    return defer.promise();
}
$.fn.is_fully_in_viewport = (function() {
    function is_visible(node, container) {
        var box = node.getBoundingClientRect();
        var viewport = container[0].getBoundingClientRect();
        var top = box.top - viewport.top;
        var bottom = box.bottom - viewport.top;
        var height = container.height();
        return bottom > 0 && top <= height;
    }
    if (window.IntersectionObserver) {
        return function(container) {
            var node = this[0];
            var defer = jQuery.Deferred();
            var item_observer = new window.IntersectionObserver(function(entries) {
                defer.resolve(entries[0].isIntersecting);
                item_observer.unobserve(node);
            }, {
                root: container[0]
            });
            item_observer.observe(node);
            return defer.promise();
        };
    } else {
        return function(container) {
            return jquery_resolve(is_visible(this[0], container));
        };
    }
})();

Answer 1

创建一个去抖函数，延迟调用 func 直到之后 等待自上次去抖动后经过的毫秒数 函数被调用。

可以使用debounce的loadash方法，

_.debounce(func, [wait=0], [options={}])

debounced函数自带cancel方法取消延迟 func 调用和一个 flush 方法来立即调用它们