jquery - 关于额外点击功能的jQuery间隔问题

Question

我有这个 javascript 代码：

var listitem = $(".landkaart > ul > li"),
                    len = listitem.length,
                    index = 0;

                $(".landkaart > ul > li:first").addClass('open');

                setInterval( function() {
                    $(".landkaart > ul > li").removeClass('open');

                    if( ( index + 1 ) >= len )
                    {
                        index = 0;
                        $(".landkaart > ul > li:first").addClass('open');
                    }
                    else
                    {
                        listitem.eq( index ).next().addClass('open');
                    }
                    index++;
                }, 5000);

我有html，

<div class="landkaart">
                <ul>
                    <li><a class="doetinchem" title="Vestiging Doetinchem" href="vestigingen.html">Doetinchem</a>
                        <div class="doetinchem">
                            <div class="pijl"></div>
                            <ul>
                                <li><h2>Doetinchem</h2></li>
                                <li>Gildenbroederslaan 4</li>
                                <li>Postbus 196</li>
                                <li>7000 AD Doetinchem</li>
                                <li>Telefoon (0314) 37 70 00</li>
                                <li>Telefax (0314) 37 70 05</li>
                                <li><a class="email" href="mailto:doetinchem@kabaccountants" title="Stuur een mail naar: doetinchem@kabaccountants">doetinchem@kabaccountants</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>

html 的 li 项目比这里显示的要多得多。但现在我的问题。现在 .landkaart ul li 项目旋转。超过 5 秒，您会看到一个新的 li 项目出现。但现在必须让 javascript 播种。当我悬停“.landkaart a”时，必须显示landkaart > li，并且必须停止间隔。当我使用鼠标时。然后必须重新开始间隔。

Answer 1

我会这样做：

1. 将函数移到 setInterval 之外
2. 如果光标结束，则放置布尔逻辑以停止更改

3. 将鼠标悬停/移出事件添加到 li 元素

          var keepRotating = true;
          function rotate() {
               if(!keepRotating) return;
               $(".landkaart > ul > li").removeClass('open');
   
   
           if( ( index + 1 ) >= len )
           {
               index = 0;
               $(".landkaart > ul > li:first").addClass('open');
           }
           else
           {
               listitem.eq( index ).next().addClass('open');
           }
           index++;
       }
   
   
       $(".landkaart > ul > li").mouseover(function(){
         keepRotating = false;
         $(".landkaart > ul > li").removeClass('open');
         $(this).addClass('open');
         index = $(".landkaart > ul).index(this);
       });
   
   
       $(".landkaart > ul > li").mouseout(function(){
         keepRotating = true;
       });
   
   
       setInterval( rotate(), 5000);