Javascript如何等待单击函数完成，然后在用户再次单击后只重复相同的功能？
Javascript如何等待单击函数完成，然后在用户再次单击后只重复相同的功能？
提问于 2020-05-20 15:06:23
下面是我的html，我正在做一个简单的文字基础游戏，玩家想要出售自己的项目。
<input name="gg1" id="gg1" value="10">
<a href="javascript:;" onclick="fastbtn(1);">Sale</a>
<script>
function fastbtn(sid){
var aa = jQuery("#gg"+sid).val();
if(aa > 0){
aa--;
jQuery("#gg"+sid).attr("value", aa);
ajaxget('plugin.php?id=game&do=store&submit=true×tamp=12345&gg1[1]=1&ggqty[1]=1&formhash={FORMHASH}&fastbuy=true','bbb'); //this is my ajax function -> ajaxget(requesturl,return result to id);
}
</script>例如，value = 10，但是当用户单击10时间(快速单击)时，value会转到0，但是我的服务器端只处理8时间。
它是否能与服务器端的点击量相匹配？
在我看来，fastbtn(sid)的第二次点击是否可以等到fastbtn(sid)的ajaxget第一次点击完成，然后才进行处理？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-20 18:06:40
之所以会发生这种情况，是因为ajax网络请求将花费有限的时间，快速单击将导致许多尚未在服务器上处理的请求，但您正在执行aa--，造成了差异。
解决这个问题的方法有很多，最简单的就是禁用按钮，而处于挂起状态的ajax将在任何给定的时间点将活动的ajax请求限制在1。
但是由于您使用的是锚标记，所以禁用是不可能的，但是您可以使用一个标志(isPending)。
因此，在加载时，我们初始化标志，表示“没有挂起的请求，您可以继续”，(false)
- When继续执行ajax，设置标志为“对不起，现在很忙，稍后再试一次”(true)
- Once ajax完成后，我们再次将标志重置为false
因此，每次用户单击，我们首先检查“我们清除”，如果没有，我们只是从fastbtn()返回什么都不做
假设您在ajax中使用jQuery的get()函数，您可以遵循以下步骤
<script>
var isPending = false
function fastbtn(sid, t){
if(isPending)
return;
var aa = jQuery("#gg"+sid).val();
if(aa > 0){
aa--;
jQuery("#gg"+sid).attr("value", aa);
ajaxget('plugin.php?id=game&do=store&submit=true×tamp=12345&gg1[1]=1&ggqty[1]=1&formhash={FORMHASH}&fastbuy=true','bbb'); //this is my ajax function -> ajaxget(requesturl,return result to id);
}
//...
//..
//.
}
function ajaxget(url){
isPending = true;
$.get(url, function(data, status){
// <--only fires on success
})
.done(function() { // <--only fires on success
})
.fail(function() { // <-- only fires on error
})
.always(function() { // <-- this always fires
isPending = false;
});
}
</script>另一种方法是将aa--放入ajax的成功回调或done()中，这样，只有当服务器记录了更改并发送了确认消息后，aa值才会更改
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61916475
复制相关文章
相似问题
腾讯云开发者
