Question

我有响应用户键盘按下的jQuery代码，并且我正在检查element是否在视图中。如果用户快速按下或按住该键（现在对我的代码来说太快了），该插件将返回promise，从而在某种循环中创建promise。我想先取消之前的承诺。

我想出了以下代码，忽略了先前的承诺：

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;
        }
    });
}

有更好的方法吗？它可以工作，但是我不知道这是创建取消/忽略promise回调的代码的正确方法。

编辑：

这是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延迟到之后自上次反跳以来等待的毫秒数已过去函数被调用。

您可以使用loadash的debounce方法

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

去抖动功能带有取消方法以取消延迟 func调用和flush方法立即调用它们

如何覆盖/取消以前一个接一个的承诺？

1 个答案: