使用 Alpine.js 在 Livewire 中重新开始倒计时答案

【问题标题】：Restart a countdown in Livewire with Alpine.js使用 Alpine.js 在 Livewire 中重新开始倒计时
【发布时间】：2021-02-22 13:04:28
【问题描述】：

我尝试构建一个调查，当用户等待时间过长时，倒计时应该每 10 秒显示一个模式。显示模式时应停止倒计时，单击“返回调查”按钮以及回答问题时应重新启动倒计时。

我用 alpine 对象尝试过这种方式：

let Countdown = () => {
        return {

                open: false,
                heart:'',
                

                ccdown(time,hue) 
                {
                    time -= 1;
                    hue += 60;

                    if (time > 0) {
                    this.heart=setTimeout(this.ccdown, 500, time, hue);
                    console.log("time: "+ time);
                    console.log("hue: " + hue);
                    
                    }
                    if(time == 0) {

                    console.log("done");
                    this.open = true;
                    }
                }

        }    
}

这就是我在刀片组件中调用函数的方式：

<div x-data="Countdown()" x-init="ccdown(10,30)">
...
</div>

但它在第二次后停止。谁能告诉我这个问题？

【问题讨论】：

标签： countdown restart laravel-8 laravel-livewire alpine.js

【解决方案1】：

问题出在这里：

setTimeout(this.ccdown, 500, time, hue);

setTimeout 只接受两个参数，函数和超时。如果必须使用参数调用函数，则应使用 bind 或创建一个新函数。所以它应该是：

setTimeout(() => {
    this.ccdown(time, hue)
}, 500)

或者，

setTimeout(this.ccdown.bind(this, time, hue), 500)

【讨论】：