设置超时延迟

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()函数。