延迟 setTimeout

Question

我希望元素一次单独缩放一个，延迟为 3 seconds.Also 当一个元素被缩放时，其他元素应该是 normal.Currently，所有元素一次又一次放大在 4 seconds.I 对元素使用 setTimeout 方法并在每个元素之间提供 3 秒的延迟后恢复正常，但它似乎并没有 working.To 继续进行，我也使用了 setInterval()延迟有 4 seconds.I 不知道我要去哪里 wrong.Here 是要理解的代码片段 better.Any 帮助将不胜感激。

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() 并将其 return 值改为 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() 被调用。

延迟 setTimeout

Delay in setTimeout

jquery

settimeout

setinterval