购物车防抖按钮

shuffle_boy

已于 2025-03-27 00:40:00 修改

阅读量400

点赞数

分类专栏： javascript 文章标签： javascript jquery html

于 2020-06-15 01:06:48 首次发布

本文章版权归shuffleboy所有，转载请注明出处

本文链接：https://blog.youkuaiyun.com/shuffle_boy/article/details/106755118

版权

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何利用JavaScript的防抖技术优化购物车按钮，避免用户快速点击时频繁发送请求，提高用户体验并减轻服务器负担。通过设置延迟函数，确保在连续点击后只执行最后一次操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车防抖按钮</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <button class="sub">-</button>
  <span class="total_price">0</span>
  <button class="add">+</button>
	<script>
	var timeout=null;
	var num=0;
	function settlement(num){ //结算 或者调接口
		return function(){
			console.log('结算了',num);
		}
	}
	function debounce(func, wait = 2000, immediate = true) { // 防抖
      let timer = null;
      return function (...args) {
        clearTimeout(timer);
        if (immediate) {
          let callNow = !timer;
          timer = setTimeout(() => {
            timer = null;
          }, wait);
          if (callNow) {
            func.apply(this, args);
          }
        } else {
          timer = setTimeout(() => {
            func.apply(this, args);
          }, wait);
        }
      };
    }
    $('.sub').on('click',function(){
			if(num<=0){
				this.disabled=true;//当数量小于或等于0时候使按钮禁用
				num=0;
			}else{
				num--;
			}
			$('.total_price').text(num);
    	debounce(settlement(num));
    })
    $('.add').on('click',function(){
    	if(num>0){
				$('.sub')[0].disabled=false;
    	}
			num++;
			$('.total_price').text(num);
    	debounce(settlement(num));
    })
	</script>
</body>
</html>