AlpineJS x-init 指令中的去抖动事件处理程序答案

【问题标题】：Debouncing event handlers in AlpineJS x-init directiveAlpineJS x-init 指令中的去抖动事件处理程序
【发布时间】：2021-05-01 11:31:18
【问题描述】：

我正在尝试将滚动事件侦听器添加到 x-refs（我不想使用 @scroll.debounce 在 DOM 中添加它们，因为我希望它尽可能便携）。

在这里编写代码：https://codepen.io/skttl/pen/vYXowBY?editors=1111

<div x-data="xOverflow()" x-init="init()" style="width:50%;border:1px solid red;position:relative;overflow:hidden;">
  <div x-ref="wrapper" style="overflow-x:auto;">
  <div x-ref="content" style="width:1000px;border:1px solid blue; height:500px;">
    
    <div>wrapper.clientWidth: <span x-text="$refs.wrapper.clientWidth"></span></div>
    <div>content.clientWidth: <span x-text="$refs.content.clientWidth"></span></div>
    <div>overflow: <span x-text="overflow"></span>
  </div>
    </div>
  <div x-show="overflow" style="position:absolute;top:0;left:90%;right:0;bottom:0;background:rgba(0,0,0,.15);"></div>
</div>

function xOverflow() {
    return {
        overflow:false,

        // methods
        setFromResize() {
            this.overflow = this.$refs?.wrapper?.clientWidth < this.$refs?.content?.clientWidth
            console.log(`resize: overflow is ${this.overflow}`);
        },
        setFromScroll(e) {
            this.overflow = !(e.target.scrollLeft == this.$refs?.content?.clientWidth - this.$refs?.wrapper?.clientWidth);
            console.log(`scroll: overflow is ${this.overflow}`);
        },

        init() {
            window.addEventListener("resize", event => _.debounce(this.setFromResize(), 250));
            this.$refs?.wrapper.addEventListener("scroll", event => _.debounce(this.setFromScroll(event)));
        }
    }
}

我试图检测 $refs.content 的 clientWidth 是否大于 $refs.wrapper。当窗口调整大小时，应该会再次检测到这一点。

除此之外，我想显示一个叠加层（如果内容溢出），滚动到末尾时应该将其删除。

我可以通过在根元素上拍@resize.window.debounce 和在包装元素上拍@scroll.debounce 来做到这一点。但我希望这个组件是可移植的，只需添加 x-data、x-init 和 x-refs，而不用担心附加事件侦听器。

我尝试将 lodash debounce 添加到事件侦听器中，但函数会为每个事件调用，而不是 debounce。检查 console.log 以获取证据。

谁能帮我解决这个问题？

【问题讨论】：

标签： javascript lodash debounce alpine.js

【解决方案1】：

原来我是个白痴，我只需要稍微移动一下即可：)

来自

window.addEventListener("resize", event => _.debounce(this.setFromResize(), 250));
this.$refs?.wrapper.addEventListener("scroll", event => _.debounce(this.setFromScroll(event)));

到

window.addEventListener("resize", _.debounce(event => this.setFromResize(), 250));
this.$refs?.wrapper.addEventListener("scroll", _.debounce(event => this.setFromScroll(event)));

【讨论】：