函数 setInterval() 在第二次调用时无法正常工作

Question

我有一个按钮名称 当我单击按钮时，加载器将出现 3 秒(带有时间间隔功能(，然后在 3 秒后会出现一个模态。 问题是当我单击分配按钮时，加载器出现，然后在 3 秒后消失，但在第二次单击分配按钮时，加载器出现，但在 1 或 2 秒内突然消失。 为什么加载器没有花费与第一次点击相同的 3 秒？

<button type="button" value="edit" name="edit-btn" class="spin-modal clear-cookie"
onclick="spiner();"> Assign
Agent</button> <div class="loader-spiner-outer class-none-view">
<div class="loader-box">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <div class="modal" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Assign Lead</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<form action="#" class="custom-add-form" method="post" style="padding:22px 0px 5px 0px;">
<div class="col-12">
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Assign Agent</label>
<select class="form-control" id="sel1">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Four</option>
</select>
</div>
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Other</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 no-pad-left-right">
<div class="form-group text-right">
<div class="submit-m-div">
<input type="submit" value="Submit" name="submit" class="add-cm-btn no-margin-top-btm">
<span class="skip-icon" style="bottom: 0px;"><i class="fas fa-angle-double-right"></i></span>
</div>
</div>
</div>
</div>
</form>
<!-- Modal footer -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>

JavaScript/jQuery 代码

function spiner() {
$(".loader-spiner-outer.class-none-view").removeClass("class-none-view");
setInterval(function() {
$(".loader-spiner-outer").addClass("class-none-view");
}, 800);
setTimeout(function() {
$("#myModal").show();
}, 900);
};
$(".close").click(function() {
$("#myModal").hide();
});

Answer 1

试试这个：

$(".close").click(function ()
{
$("#myModal").hide();
});
function spiner()
{
$(".loader-spiner-outer").addClass("class-none-view"); 
setTimeout(function ()
{
$(".loader-spiner-outer").removeClass("class-none-view");
setTimeout(function ()
{
$("#myModal").show();
}, 3000);
}, 3000);
}

.loader-spiner-outer
{
display: none;
}
.loader-spiner-outer.class-none-view
{
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" value="edit" name="edit-btn" class="spin-modal clear-cookie"
onclick="spiner();"> Assign
Agent</button> <div class="loader-spiner-outer">
<div class="loader-box">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <div class="modal" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Assign Lead</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<form action="#" class="custom-add-form" method="post" style="padding:22px 0px 5px 0px;">
<div class="col-12">
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Assign Agent</label>
<select class="form-control" id="sel1">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Four</option>
</select>
</div>
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Other</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 no-pad-left-right">
<div class="form-group text-right">
<div class="submit-m-div">
<input type="submit" value="Submit" name="submit" class="add-cm-btn no-margin-top-btm">
<span class="skip-icon" style="bottom: 0px;"><i class="fas fa-angle-double-right"></i></span>
</div>
</div>
</div>
</div>
</form>
<!-- Modal footer -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>

并且不要使用setInterval(() => {})，因为它是一个重复计时器。 使用setTimeout(() => {})，因为这只会运行一次。

"设置间隔" vs "设置超时">