jquery - context.refresh() 和/或 Waypoint.refreshAll() 不起作用？

Question

使用新代码更新了 2/16，以反射(reflect)评论中发现的错误

我使用以下代码使航路点在页面上正常工作。请注意，我使用的是该插件的 3.1.1 版本，但我仍然使用类似于该插件的 2.x 版本的 jQuery 语法来处理一些复杂的选择器。此代码正在运行:

var stickTop = wrapper.waypoint({
    handler: function(direction){         
        var len = $(this.element).closest('.ctable').find('div.ctable-row').length; 
        if ((direction === 'down') && (len > 1)) {
            $(this.element).closest('.ctable').find(stickTarget).addClass('stuck').css("top", $pageHeadOffset );
        }
        else if ((direction === 'up') && (len > 1)) {
            $(this.element).closest('.ctable').find(stickTarget).removeClass('stuck');
        }
    }, 
    offset: $pageHeadOffset,
});

这(仍然)很好并且工作正常，但是页面上有另一个元素可以调整大小，从而有效地使页面更长。为了解决这个问题，我尝试在另一个点击目标上调用 Waypoint.refreshAll(); 和 stickTop.context.refresh(); ，如下所示:

$('.page-info-link').click(function(){
    $('.page-info').toggleClass('closed');
    $('.page-info-message').slideToggle();
    Waypoint.refreshAll();
});

但我无法使刷新准确工作。

有没有办法使用上面类似 jQuery 的语法(不传递 element: 选项并仍然调用刷新？

2/16 更新:

此新代码现在会引发控制台错误:

$('.page-info-link').click(function(){
    $('.page-info').toggleClass('closed')
    $('.page-info-message').slideToggle()
    stickTop.refresh()
});

错误:“未定义不是函数”

Answer 1

这里有两个问题:

1. stickTop.refresh():我不知道你为什么改变这个。首先，stickTop 是一个数组，因为 $.fn.waypoint 返回一个 Waypoint 实例数组，每个实例对应 jQuery 对象中的每个匹配元素。其次，refresh 不是 Waypoint 实例上的方法，而是 Context 上的方法。 TLDR:坚持使用 Waypoint.refreshAll()。
2. slideToggle 是一个 jQuery 动画。您想要做的是在动画完成后调用刷新，但它是一个异步函数。通过在其之后直接调用 refreshAll，您可以在动画开始之前进行刷新。您需要在动画的 complete 回调中调用刷新。

最终结果:

$('.page-info-message').slideToggle(function() {
  Waypoint.refreshAll()
})