如何在 AlpineJS 中递归调用方法？答案

【问题标题】：How do I call a method recursively in AlpineJS?如何在 AlpineJS 中递归调用方法？
【发布时间】：2020-06-04 17:46:17
【问题描述】：

import 'alpinejs'

window.scrollToTop = () => {
    return {
        scroll() {
            const t = document.documentElement.scrollTop || document.body.scrollTop
            if ( t > 0 ) {
                window.requestAnimationFrame( this.scroll )
                window.scrollTo( 0, t - t / 10 )
            }
        }
    }
}

我正在使用下面的代码来做一个简单的滚动到顶部的动画。

使用 window.scrollToTop，因为我使用 ParcelJS 来捆绑项目，所以我必须将它附加到 window 对象。

当我尝试运行滚动功能时出现此错误。

app.js:8 Uncaught TypeError: Cannot read property 'scroll' of undefined

我在滚动点击时做了一个console.log，似乎在方法this.scroll 内被识别。但是当调用window.requestAnimationFrame 时，它会变成undefined？我尝试将它作为变量传递，但它也不起作用。在这种情况下，如何使用requestAnimationFrame 递归调用自身？

【问题讨论】：

您是否尝试在进入 scroll() 方法并使用 that.scroll 之前复制此内容：例如 that = this？
是的，我试过了。

标签： javascript alpine.js

【解决方案1】：

处理作用域时，Javascript 有点复杂。在第一个回调中this 恢复为窗口，因此您需要在递归使用此类函数时手动绑定它。

window.requestAnimationFrame(this.scroll.bind(this)) 应该可以工作

【讨论】：

绑定确实有效！谢谢！但是为什么在这种情况下不传入that = this 呢？是的，经过这么多年，范围有时仍然让我措手不及。 =(
它适用于第一次迭代，然后在回调中再次调用该函数并在该函数内部，如果您不绑定它，这是窗口，因为 setTimeout 和 requestAnimationFrame 回调的工作方式。然后，第二次递归调用将此（窗口）分配给that 变量，因此当您再次尝试调用 show 时，它会失败。