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

Question

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 递归调用自身？

Answer 1

Javascript 在处理范围时有点复杂。在第一个回调中 this 恢复为 window 因此您需要在递归使用这些函数时手动绑定它。

window.requestAnimationFrame(this.scroll.bind(this)) 应该有效

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

How do I call a method recursively in AlpineJS?

javascript

alpine.js