使用Alpine.js重新开始Livewire的倒计时

问题描述

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

我对高山对象尝试过这种方式：

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>

但是它在第二次之后停止。 有人可以告诉我问题吗？

解决方法

问题在这里：

setTimeout（this.ccdown，500，time，hue）;

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

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

或者，

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