setTimeout的延迟

Question

我希望每个元素一次缩放一次，延迟3秒。另外，当一个元素缩放时，其他元素应该是正常的。当前，所有元素都立即缩放，并在4秒后恢复正常。我对元素使用了setTimeout方法，并在其中每个元素之间提供了3秒的延迟，但似乎无法正常工作。为了保持该过程的进行，我也使用了setInterval（）并延迟了4秒。我没有不知道我要去哪里错了。下面是代码片段，您可以更好地了解它。任何帮助将不胜感激。

function scale(element){

$(element).toggleClass('found');
}

function autoscale(){
setTimeout(scale('.icons .image:first-child li:first-child'),1000);
setTimeout(scale('.icons .image:first-child li:nth-child(2)'),4000);
setTimeout(scale('.icons .image:first-child li:nth-child(3)'),7000);
setTimeout(scale('.icons .image:last-child li:first-child'),10000);
setTimeout(scale('.icons .image:last-child li:nth-child(2)'),13000);
setTimeout(scale('.icons .image:last-child li:nth-child(3)'),16000);
}
autoscale();
setInterval(autoscale,4000);

  .found{
      transform: scale(1.2);
      z-index: 4!important;
  }
  .icons li{
    cursor: pointer;
    transition: 0.2s ease-in;
    list-style-type:none;
  }
   .icons li {
     position: relative;
     line-height: 20px;
     z-index: 2;
     border-radius: 50%;
     padding: 10px;
     width: 80px;
     height: 80px;
     background: linear-gradient(45deg, #a1c4fd,#c2e9fb);
     display: inline-flex;
     align-items: center;
     justify-content: center;     
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div class="icons">

       <div class="image">
           <ul>
              <li>
                 <p>A</p>
               </li>
               <li>
                  <p>B</p>
                </li>
                <li>
                   <p>C</p>
                 </li>  
            </ul>              
         </div>
         <div class="image">
             <ul>
                 <li>
                     <p>D</p>
                  </li>
                  <li>
                      <p>E</p>
                   </li>
                   <li>
                       <p>F</p>
                   </li>
              </ul>
          </div>
     </div>

Answer 1

setTimeout()将函数作为其第一个参数。您正在调用函数scale()，并将其返回值提供给setTimeout()。因此，您的代码实际上与此相同：

var ret = scale('.icons .image:first-child li:first-child');
setTimeout(ret ,1000);

因此您可以看到scale()被立即调用。

例如，您需要为其提供功能

setTimeout(function() { scale('.icons .image:first-child li:first-child') }, 1000);

这样，在超时后将调用函数，然后在内部调用scale()。