我的 javascript 有时只能在虚拟主机上运行

Question

我的 javascript 有问题。这是一个画廊滑块。它在本地主机上完美运行，但是当我将其上传到虚拟主机时，它有时只能在多次刷新后运行。控制台没有写任何错误，一切似乎都很好。

const carouselSlide = document.querySelector('.slide');
const carouselImages = document.querySelectorAll('.slide img');
 
//Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

//Counter   
 let counter = 1;
 const size = carouselImages[0].clientWidth;

 carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';
 

 //Button Listeners
 nextBtn.addEventListener('click',()=>{
     if (counter>= carouselImages.length -1) {return;}
     carouselSlide.style.transition = "transform 0.7s ease-in-out";
     counter++
     carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';


 });

 prevBtn.addEventListener('click',()=>{
    if (counter <=0) {return;}
    carouselSlide.style.transition = "transform 0.7s ease-in-out";
    counter--
    carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';


});
carouselSlide.addEventListener('transitionend', ()=> {

    if (carouselImages[counter].id === 'lastClone')
    {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - 2;
        carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';

    }
    if (carouselImages[counter].id === 'firstClone')
    {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - counter;
        carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';

    }

});

Answer 1

首先想到的是页面加载速度。运行在本地主机上通常非常快。并且 DOM 在您的代码执行之前加载。

没有关于您的代码何时执行的更多信息？我不能准确。

但我认为不同的刷新是有关系的。尝试附加调试器（您可以使用 Chrome 调试器）并检查变量的值。

文档准备好后，请仔细检查您的代码是否运行。

我的 javascript 有时只能在虚拟主机上运行

My javascript works only sometimes on webhosting

html

javascript

web-hosting