js解决点击购物车过于频繁的问题

说明:平时我们喜欢购物,但有时也有一些人手机卡频繁点击加入购物车,造成请求服务器频繁操作,在用户基数大的时候,会给服务器造成不少的资源浪费,所以给出下面简单demo供大家参考。在第一次点击后,如果再接连点击会弹出操作频繁,本案例设置下次点击间隔在1.5s。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>购物车(时间间隔)(解决点击过于频繁时问题)</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>

</head>
<body>
<p ctime="null" class="clickTime">点我</p>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
 //购物车(时间间隔)(解决点击过于频繁时问题)
 $(".clickTime").click(function(){
    var clickTime= $(this).attr("ctime");
    var nowTime = new Date().getTime();
      if (clickTime != 'undefined' && (nowTime - clickTime < 1500)) {        
        alert("操作过于频繁");
      } else {
        $(this).attr({"ctime":nowTime});
        $(this).html("每隔1.5秒点我不会出现弹框+时间戳:"+nowTime);    
      }
 });
     
});
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容