如何在页面加载上延迟脚本？

发布于 2025-02-13 10:37:14 字数 1209 浏览 0 评论 0原文

我需要在页面加载期间延迟自动滑块。我需要帮助卑诗省，我不喜欢JS。有人可以帮我吗？

<script>
   // User Settings
    var transitionDuration = 1000; // set this to your "Slider Settings > Duration" in milliseconds
  var slideInterval = 5000; // The interval at which the slider should change in milliseconds
  var nextButton = '.next-button'; // The class name of your slider's "Next" button

    // Automatic Timed Slider
  var interval;
    
  $(window).on('load', function(){
    autoplay(slideInterval);
  });
  
    $(nextButton).on('click', function(){
    var button = this;
    $(button).css('pointer-events', 'none');
    setTimeout(function(){
        $(button).css('pointer-events', 'auto')
    }, transitionDuration);
    autoplay();
  });
  
  function autoplay(init){
    clearInterval(interval);
    if (init){
        interval = setInterval(function(){
        $(nextButton).click();
        }, slideInterval);
    } else {
      interval = setInterval(function(){
        $(nextButton).click();
      }, slideInterval + transitionDuration);
    }
  }
</script>

也许有喜欢的东西？但是我不知道正确的地方。

setTimeout(function(){
      //deferred onload
    }, 2000);

谢谢你！

原文

I need to delay my auto slider during page load. I need to help bc I’m not into JS that much.
Can someone help me?

<script>
   // User Settings
    var transitionDuration = 1000; // set this to your "Slider Settings > Duration" in milliseconds
  var slideInterval = 5000; // The interval at which the slider should change in milliseconds
  var nextButton = '.next-button'; // The class name of your slider's "Next" button

    // Automatic Timed Slider
  var interval;
    
  $(window).on('load', function(){
    autoplay(slideInterval);
  });
  
    $(nextButton).on('click', function(){
    var button = this;
    $(button).css('pointer-events', 'none');
    setTimeout(function(){
        $(button).css('pointer-events', 'auto')
    }, transitionDuration);
    autoplay();
  });
  
  function autoplay(init){
    clearInterval(interval);
    if (init){
        interval = setInterval(function(){
        $(nextButton).click();
        }, slideInterval);
    } else {
      interval = setInterval(function(){
        $(nextButton).click();
      }, slideInterval + transitionDuration);
    }
  }
</script>

Maybe with something likes this? But I don't know the right place.

setTimeout(function(){
      //deferred onload
    }, 2000);

Thank you!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

望笑 2025-02-20 10:37:14

const myTimeout = setTimeout(myGreeting, 3000);

function myGreeting() {
  document.getElementById("demo").innerHTML = "Happy Birthday!"
}

<p>Wait 3 seconds...</p>

<h2 id="demo"></h2>

const myTimeout = setTimeout(myGreeting, 3000);

function myGreeting() {
  document.getElementById("demo").innerHTML = "Happy Birthday!"
}

<p>Wait 3 seconds...</p>

<h2 id="demo"></h2>

回复收藏 0 原文

小ぇ时光︴ 2025-02-20 10:37:14

就个人而言，我认为最好不要使用如此延迟，但在客户端，如果页面在x秒之后与您相同，那么您仍然不会真正知道。

不同的人，有不同的计算机会得到不同的结果。

最好检查您想发生一次每1-2秒发生一次的更改。

如果发生了变化，那么您可以执行脚本并停止间隔。

某些动作：

出现。

我们可以检查我们的DIV通过选择具有相同类别的所有元素/ID，并使用 length count 存在多少元素。如果它的0表示它不存在。

document.querySelectorAll('.-img._glyph').length //=1
document.querySelectorAll('.-img._glyphSADCASDC').length //=0

现在，使用 setInterval 和 clear Interval ，我们将继续检查。

我们将检查直到我们的状况真实，然后停止间隔循环。

myInterval = setInterval(()=>{
        console.log('myInterval interval called...');
    if ( document.querySelectorAll('.-img._glyphSASA').length > 0 ) {
            //YOUR CODE HERE

            clearInterval(myInterval);
        }
}, 1000);

Personally, I believe its better not use such a delay, still you won't really know, on client side, if the page is tha same after X seconds as it's for you.

Different people, with different computers, get different results.

Its better to check whenever the change you want to take place happened every 1-2 seconds with an interval.

If change have taken place then you can execute your script and stop the interval.

Some action :

For example, lets say that after 2-3 seconds, we expect a div to appear.

We can check if our div exists by select all elements with same class / id and by using length count how many exists. If its 0, means that it doesnt exist.

document.querySelectorAll('.-img._glyph').length //=1
document.querySelectorAll('.-img._glyphSADCASDC').length //=0

Now with setInterval and clearInterval, we are going to keep checking.

We will check until our condition is true, then stop our interval loop.

myInterval = setInterval(()=>{
        console.log('myInterval interval called...');
    if ( document.querySelectorAll('.-img._glyphSASA').length > 0 ) {
            //YOUR CODE HERE

            clearInterval(myInterval);
        }
}, 1000);

回复收藏 0 原文

~没有更多了~