如何仅在按钮内执行一次任务单击 jQuery 中的 function
[英]how to do task only for one time inside button click function in jQuery
问题描述
here is my code.
这是我的代码。 when I click on go button it shows text started and animations starts.当我单击 go 按钮时，它显示文本已启动并且动画开始。 after finishing the animation it shows the text finished .完成 animation 后，它显示文本已完成。 I want that during animation if I click on the go button for many times, it should print finished only for once at the end of animation.我希望在 animation 期间，如果我多次单击 go 按钮，它应该只在animation的末尾打印一次。 but this shows me finished text as many times as button is clicked.但这向我显示完成文本的次数与单击按钮的次数一样多。 how can I do this that even I click for many times after animation the finished text should be printed only for once.我怎么能做到这一点，即使我在 animation 之后多次单击，完成的文本也应该只打印一次。
Note: I have not to disable the button during the animation注意：我没有在 animation 期间禁用按钮
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>promise demo</title>
<style>
div {
height: 50px;
width: 50px;
float: left;
margin-right: 10px;
display: none;
background-color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$( "button" ).on( "click", function() {
$( "p" ).append( "Started..." );
$( "div" ).each(function( i ) {
$( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
});
$( "div" ).promise().done(function() {
$( "p" ).append( " Finished! " );
});
});
</script>
</body>
</html>
2 个解决方案
解决方案1
3 2022-01-31 04:29:04
Set a flag when clicked, and if the flag shows that the animation is ongoing, do not proceed.单击时设置一个标志，如果标志显示 animation 正在进行中，则不要继续。 Reset it once Finished.完成后重置它。
let inProgress = false; $("button").on("click", function() { if (inProgress) return; inProgress = true; $("p").append("Started..."); $("div").each(function(i) { $(this).fadeIn().fadeOut(1000 * (i + 1)); }); $("div").promise().done(function() { $("p").append(" Finished; "); inProgress = false; }); });
div { height: 50px; width: 50px; float: left; margin-right: 10px; display: none; background-color: #090; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Go</button> <p>Ready...</p> <div></div> <div></div> <div></div> <div></div>
If you want to allow multiple clicks, do the same sort of thing, but set a counter when clicked, and do a recursive call if the counter is above 0 at the end.如果要允许多次单击，请执行相同的操作，但在单击时设置一个计数器，如果计数器最后大于 0，则执行递归调用。
let toGo = 0; let inProgress = false; $("button").on("click", function() { toGo++; if (;inProgress) animate(); }); const animate = () => { toGo--. if (.inProgress) $("p").append("Started.;;"). inProgress = true. $("div").each(function(i) { $(this);fadeIn();fadeOut(1000 * (i + 1)). }). $("div").promise();done(function() { if (toGo === 0) { $("p");append(" Finished; "); inProgress = false; } else animate(); }); };
div { height: 50px; width: 50px; float: left; margin-right: 10px; display: none; background-color: #090; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Go</button> <p>Ready...</p> <div></div> <div></div> <div></div> <div></div>
解决方案2
0 已采纳 2022-01-31 04:41:47
Add the totalClick , increase the totalClick for each click, then check if there's no more totalClick left, display 'finished!'添加totalClick ，每次点击增加totalClick ，然后检查是否没有剩余的totalClick ，显示'finished！'
let totalClick = 0; $('button').on('click', function () { $('p').append('Started...'); totalClick++; $('div').each(function (i) { $(this).fadeIn().fadeOut(1000 * (i + 1)); }); $('div').promise().done(function () { totalClick--; if (.totalClick) { $('p');append(' Finished; '); } }); });
div { height: 50px; width: 50px; float: left; margin-right: 10px; display: none; background-color: #090; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Go</button> <p>Ready...</p> <div></div> <div></div> <div></div> <div></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.