如何优化JavaScript代码，为多个Div设置不同的显示时长定时器

嘿，能看出来你已经靠自己摸索出了一种实现方式，但面对近100个Div时，一堆if判断确实会让代码变得臃肿又难维护。这里有个更简洁优雅的方案，核心思路是把每个Div的显示时长直接配置在HTML里，让JS只负责通用逻辑，不用写一堆条件判断~

步骤1：给每个Div添加自定义时长属性 #

我们可以利用HTML的data-*自定义属性，给每个.images元素单独设置显示时长。比如想让某个Div显示2500ms，就加data-duration="2500"；另一个想显示1500ms，就加data-duration="1500"。这样每个元素的配置一目了然，还和JS逻辑分离。

修改后的HTML示例（关键部分）：

<div id="imagescollection"> 
  <!-- 这个Div显示2500ms -->
  <div class="images" data-duration="2500">
    <div class="pam _3-95 _2ph- _2lej uiBoxWhite noborder"><div class="_3-95 _2pim _2lek _2lel">Anne faure (Brouteur)</div> 
    <div class="_3-95 _2let"><div><div></div><div>Coucou</div><div></div><div></div></div> 
    </div> 
    <div class="_3-94 _2lem">15 janv. 2022 à 08:29</div></div>
  </div>
  <!-- 这个Div显示1000ms -->
  <div class="images" data-duration="1000">
    <div class="pam _3-95 _2ph- _2lej uiBoxWhite noborder"><div class="_3-95 _2pim _2lek _2lel">Sir Perceval</div> 
    <div class="_3-95 _2let"><div><div></div><div>Salut</div><div></div><div></div></div> 
    </div> 
    <div class="_3-94 _2lem">15 janv. 2022 à 08:56</div></div>
  </div>
  <!-- 其他Div同理，按需设置data-duration -->
  <div class="images" data-duration="1500">...</div>
  <div class="images" data-duration="2000">...</div>
</div>

步骤2：修改JS代码读取自定义属性 #

接下来调整JS，让它自动读取每个Div的data-duration值，代替原来的if判断逻辑。如果某个Div没设置这个属性，我们还可以给一个默认时长（比如1000ms），避免出错。

修改后的JS代码：

<script>
$(document).ready(function() {
  var images = $('.images');
  var current = 0;
  images.hide();
  Rotator();

  function Rotator() {
    // 获取当前元素的自定义时长，没有则用默认值1000ms
    var displayDuration = parseInt($(images[current]).data('duration')) || 1000;
    
    // 用读取到的时长执行淡入淡出逻辑
    $(images[current])
      .fadeIn('slow')
      .delay(displayDuration)
      .fadeOut('slow');

    $(images[current]).queue(function() {
      // 切换到下一个元素，循环轮播
      current = current < images.length - 1 ? current + 1 : 0;
      Rotator();
      $(this).dequeue();
    });
  }
});
</script>

为什么这个方案更好？ #

• 分离关注点：HTML负责配置每个元素的显示时长，JS只负责通用的轮播逻辑，代码结构更清晰。
• 可扩展性强：新增Div时，只需要给它加个data-duration属性就行，完全不用修改JS代码。
• 易维护：哪个Div的时长需要调整，直接改HTML里的属性值，不用在一堆if里找对应的判断条件。

这样不管你有10个还是100个Div，代码都能保持简洁优雅~

内容的提问来源于stack exchange，提问作者Garbez François