javascript - 如何修改 setInterval 代码以最初触发间隔操作

Question

我不是 JavaScript 专家，但我找到了一个可以帮助我完成我需要的脚本，但我需要对其进行一些小的修改。这是JS代码:

$('html').addClass('js');

$(function() {

  var timer = setInterval( showDiv, 4000);

  var counter = 0;

  function showDiv() {
    if (counter ==0) { counter++; return; }

    $('#div1, #div2, #div3, #div4')
      .stop()
      .hide()
      .filter( function() { return this.id.match('div' + counter); })   
      .show('fast');
    counter == 4? counter = 0 : counter++; 

  }

});

这是一个 html 代码:

<div id='container'>
<div id='div1' class='display' style="background-color: red;"> 
  div1
</div>

<div id='div2' class='display' style="background-color: green;"> 
  div2
</div>

<div id='div3' class='display' style="background-color: blue;"> 
  div3
</div>
<div id='div4' class='display' style="background-color: yellow;"> 
  div4
</div>
<div>

现在这个脚本的作用是在页面打开 10 秒后显示第一个 div，然后关闭它并打开下一个。我需要更改的是删除第一个 div 的 10 秒时间间隔，以便它与页面一起打开，并按原样保留其他 div 的时间间隔。我希望你明白我想要实现的目标。感谢您的帮助。

Answer 1

第一次只需在设置计时器的上方手动调用 showdiv() 并将计数器初始化移至其上方:

...
var counter = 1;
showDiv();
var timer = setInterval( showDiv, 4000);
...