Javascript 如果项目按钮在2秒钟内处于非活动状态-执行操作

我想实现这样的逻辑：

• 用户点击“加号”或“减号”按钮
• 如果用户在2秒钟内没有点击这些按钮中的任何一个，那么我们假设当前数量应该发送到服务器

现在，我有三个按钮： “加号”-将数量增加1，并更改第页的值。 “减”-将数量减少1，并更改第页的值。 “确认”-向Spring Boot controller发送带有当前数量参数的请求并更改服务器端数量的按钮。 我宁愿避免使用这个按钮，因为它增加了复杂性

有没有一个方便的方法来摆脱确认按钮？ 我知道我们如何做到这一点的唯一方法是在每次单击“加号”或“减号”按钮时向控制器发送请求。 但这种方法似乎效率低下

$（文档）.ready（函数（）{
//为每个ajax调用包含csrf
$（函数（）{
let token=$（“meta[name=''u csrf']”）attr（“content”）；
let header=$（“meta[name=''u csrf_header']”）attr（“content”）；
$（文档）.ajaxSend（函数（事件、xhr、选项）{
setRequestHeader（头，令牌）；
});
});
$（“.plusForm”）.submit（函数（事件）{
event.preventDefault（）；
让$prodCount=$（this.parent（）.parent（）.parent（）.find（“.prodCount span”）；
让currentQuantity=parseInt（$prodCount.text（））；
$prodCount.text（++currentQuantity）；
});
$（“.minusForm”）.submit（函数（事件）{
event.preventDefault（）；
让$prodCount=$（this.parent（）.parent（）.parent（）.find（“.prodCount span”）；
让currentQuantity=parseInt（$prodCount.text（））；
$prodCount.text（--currentQuantity）；
});
$（“.changedQuantityForm”）.submit（函数（事件）{
event.preventDefault（）；
让$prodCount=$（this.parent（）.parent（）.parent（）.find（“.prodCount span”）；
让数量=parseInt（$prodCount.text（））；
让productId=$（this.parent（）.parent（）.parent（）.parent（）.parent（）.find(
“.product id”）.val（）；
changeQuantityAjax（产品ID、数量）；
});
函数changeQuantityAjax（id、数量）{
日志（“服务器端更改的数量”）；
/*$.ajax({
键入：“放置”，
contentType:“应用程序/json”，
url:“/rest/cart/”+id+“？数量=”+quantity，
数据：{
“数量”：数量
},
成功：函数（）{
console.log（'SUCCESS'+id+''+quantity）；
//警报（名称+'已删除'）
},
错误：函数（）{
console.log（'ERROR'+id+''+quantity）；
}
}); */
}
})

鸡
1000 $






在购物车中：

0

查看

changeQuantityAjax

函数以同时实现clearTimeout和setTimeout，在最后一次用户操作后产生2秒的“最小”延迟

从每次单击按钮，

将此

传递给

getIdandQuantity

函数

它不会改变逻辑中的很多东西，但是请注意

.parents（）

而不是

parent（）.parent（）.parent（）

$（文档）.ready（函数（）{
//为每个ajax调用包含csrf
$（函数（）{
let token=$（“meta[name=''u csrf']”）attr（“content”）；
let header=$（“meta[name=''u csrf_header']”）attr（“content”）；
$（文档）.ajaxSend（函数（事件、xhr、选项）{
setRequestHeader（头，令牌）；
});
});
$（“.plusForm”）.submit（函数（事件）{
event.preventDefault（）；
让$prodCount=$（this.parents（.prodCount”）.find（“span”）；
让currentQuantity=parseInt（$prodCount.text（））；
$prodCount.text（++currentQuantity）；
getIdandQuantity（本）；
});
$（“.minusForm”）.submit（函数（事件）{
event.preventDefault（）；
让$prodCount=$（this.parents（.prodCount”）.find（“span”）；
让currentQuantity=parseInt（$prodCount.text（））；
$prodCount.text（--currentQuantity）；
getIdandQuantity（本）；
});
//这是从单击的按钮检索id和数量的函数
函数getIdandQuantity（btn）{
设$parent=$（btn.parents（“.prodCount”）；
让数量=parseInt（$parent.find（“span”）.text（））；
让productId=$parent.find（'.productId'）.val（）；
changeQuantityAjax（产品ID、数量）；
}
//用于存储挂起setTimeout的引用的变量
让Ajax超时
函数changeQuantityAjax（id、数量）{
//清除任何现有的setTimeout
clearTimeout（ajaxTimeout）
//设置2秒超时
ajaxTimeout=setTimeout（函数（）{
日志（“服务器端更改的数量”）；
/*$.ajax（{…}）*/
}, 2000)
}
})

鸡
1000 $






在购物车中：

0

但我不确定我是否应该应用它…

是的，你应该。你试过了吗？--您发布的代码不是相关的。是的，我将submit按钮的逻辑提取到函数updateQuantityOnServer（按钮）。添加这一行后：changedQuantityTimeout=setTimeout（updateQuantityOnServer（this），1