页面加载时如何延迟脚本执行？实现轮播自动播放延迟启动

你只需要把setTimeout逻辑包裹页面加载后首次启动轮播的调用代码即可，不需要改动其他原有轮播逻辑，插入位置就在$(window).on('load')的回调函数内部。

具体修改步骤 #

• 可以先在用户配置区域新增一个启动延迟的参数，方便后续调整延迟时长：

  var startupDelay = 2000; // 页面加载完成后，延迟2秒再启动自动轮播，单位毫秒
  

• 修改原来的window load监听逻辑，把autoplay(slideInterval)的调用放到setTimeout回调里。

修改后的完整代码 #

<script>
   // User Settings
    var transitionDuration = 1000; // 对应轮播设置里的切换动画时长，单位毫秒
    var slideInterval = 5000; // 轮播自动切换的间隔时长，单位毫秒
    var nextButton = '.next-button'; // 轮播「下一张」按钮的类名
    var startupDelay = 2000; // 页面加载后延迟启动轮播的时长，单位毫秒

    // Automatic Timed Slider
    var interval;
    
    $(window).on('load', function(){
      // 在这里套延迟定时器，延迟首次启动自动轮播
      setTimeout(function(){
        autoplay(slideInterval);
      }, startupDelay);
    });
  
    $(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>

注意事项 #

• 不要把按钮点击事件绑定、autoplay函数定义的代码放到setTimeout里，否则会导致页面加载后前几秒点下一张按钮没反应、轮播函数未定义的报错。
• 如果你不需要灵活调整延迟时长，也可以不新增startupDelay变量，直接把延迟时间写在setTimeout的第二个参数位置，和你之前写的参考代码逻辑完全一致。
• 这个修改不会影响原有手动点击切换、轮播间隔重置的逻辑，首次自动轮播会在页面加载完成后，等待你设置的延迟时间才会触发。

内容的提问来源于stack exchange，提问作者herrderschoepfung