Alpine JS使用window.setInterval()函数以间隔更改图像

Question

我正在尝试用Alpine JS和标准JS函数setInterval解决琐碎的任务。因此，我试图构建一个图像选择器，其中图像将每秒(1000ms(更改一次。

这是我得到的：

<div x-data="imgFunc()">
<h1 class="text-xl py-3">Chosing the picture</h1>
<div class="w-1/2">
<img x-show = "img === 'img1'" src="{{ asset('images/training/img1.jpg') }}" alt="Main Image">
<img x-show = "img === 'img2'" src="{{ asset('images/training/img2.jpg') }}" alt="Main Image">
<img x-show = "img === 'img3'" src="{{ asset('images/training/img3.jpg') }}" alt="Main Image">
</div>
<div>
<ul class="flex">
<li class="w-1/6 p-3" :class="{ 'border' : img==='img1' }"><img src=" {{ asset('images/training/img1.jpg') }} " alt="image1" @click = "startImg"></li>
<li class="w-1/6 p-3" :class="{ 'border' : img==='img2' }"><img src=" {{ asset('images/training/img2.jpg') }} " alt="image2" @click = "img='img2'"></li>
<li class="w-1/6 p-3" :class="{ 'border' : img==='img3' }"><img src=" {{ asset('images/training/img3.jpg') }} " alt="image3" @click = "img='img3'"></li>
</ul>
</div>

</div>

<script>
function imgFunc(){
var i = 1;
var img ='img'+i;
return {
i,
img,
startImg(){
var myvar = window.setInterval(function(){
this.img = 'img'+this.i;
if(this.i<3){
this.i++;
}else{
this.i=1;
}    
}, 1000);
},
changeImg() {
this.img = 'img'+this.i;
if(this.i<3){
this.i++;
}else{
this.i=1;
}                       
}
}

}
</script>

当列表中的图像#1被点击时，图像应该开始改变，但这永远不会发生。为什么？

我还试图在@click事件中传递函数名称changeImg((，它运行得很好，只需按下一个按钮，图像就会一个接一个地变化。

我还尝试将函数名changeImg((传递给setInerval((，如下所示：

startImg(){
var myvar = window.setInterval(this.changeImg, 1000);
},

或者像这样：

startImg(){
var myvar = window.setInterval(changeImg, 1000);
},

我试图改变"；这个"；至"；自我；

<script>
function imgFunc(){
var i = 1;
var img ='img'+i;
var self=this;
return {
i,
img,
startImg(){
var myvar = window.setInterval(function(){
self.img = 'img'+self.i;
if(self.i<3){
self.i++;
}else{
self.i=1;
}    
}, 1000);
},
changeImg() {
this.img = 'img'+this.i;
if(this.i<3){
this.i++;
}else{
this.i=1;
}                       
}
}

}
</script>

但什么都不管用。

Answer 1

您的问题是使用function，因此函数内部的this不是Alpine.jsthis。imgFunc内部的this也不是Alpine.js的this(对此的快速解释是，imgFunc在Alpine.js初始化以生成初始"状态"之前运行，因此this是窗口(

有两种方法可以修复它，要么使用this，要么在setInterval:内部使用箭头函数

<script>
function imgFunc(){
var i = 1;
var img ='img'+i;
return {
i,
img,
startImg(){
var myvar = window.setInterval(() => {
this.img = 'img'+this.i;
if(this.i<3){
this.i++;
}else{
this.i=1;
}    
}, 1000);
},
changeImg() {
this.img = 'img'+this.i;
if(this.i<3){
this.i++;
}else{
this.i=1;
}                       
}
}

}
</script>

或者，您可以在startImg函数中设置self = this

<script>
function imgFunc(){
var i = 1;
var img ='img'+i;
return {
i,
img,
startImg(){
var self=this;
var myvar = window.setInterval(function(){
self.img = 'img'+self.i;
if(self.i<3){
self.i++;
}else{
self.i=1;
}    
}, 1000);
},
changeImg() {
this.img = 'img'+this.i;
if(this.i<3){
this.i++;
}else{
this.i=1;
}                       
}
}

}
</script>

还有另一种方法可以做到这一点，那就是在setInterval回调中使用.bind，但这更为冗长和复杂。

Answer 2

正如hugo所提到的，this的上下文不会解析为外部函数，因此您需要使用箭头函数，因为它没有上下文。

我对alpine.js的用途做了一些更改。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.1/tailwind.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.7.3/alpine.js"></script>
<div x-data="imgFunc()">
<h1 class="text-xl py-3">Chosing the picture</h1>
<div class="w-1/2">
<img :src="currentImage" alt="Main Image">
</div>
<div>
<ul class="flex">
<template x-for='(image,index) in images'>
<li class="w-1/6 p-3" :class="{'border': currentImage===image}">
<img :src="image" alt="image1" @click="startImg(index)">
</li>
</template>
</ul>
</div>
</div>

<script>
function imgFunc() {
return {
currentImage: 'https://images.pexels.com/photos/5549634/pexels-photo-5549634.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=200&w=400',
images: [
'https://images.pexels.com/photos/5549634/pexels-photo-5549634.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=200&w=400',
'https://images.pexels.com/photos/5101387/pexels-photo-5101387.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
'https://images.pexels.com/photos/2363832/pexels-photo-2363832.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
],
startImg(index) {
this.currentImage = this.images[index];
if (index > 0)
return;
let i = 0;
var myvar = setInterval(() => {
i = (i >= this.images.length - 1) ? 0 : ++i;
this.currentImage = this.images[i];
}, 1000);
},
}
}
</script>