前端如何实现请求防抖

前端实现请求防抖

前言：最近做一个uni-app的h5项目，实现一个购物车商品数量加减发送请求时候，发现快速点击会发送多个请求给后端，直接导致整个页面在服务请求加载。

我需要解决这个问题，实现只发送最后一次请求，然后本作者就想到了 →防抖

1. 调试问题

本人去网上看了大多的防抖函数，都没能实现我想要的请求功能。本人请求函数用Promise，我发现大多在封装的防抖函数都是return返回一个函数包裹着定时器,导致我的请求并没有执行!

比如这种防抖代码（是不成功的）

function debounce(func, timeout) {
  let timer;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      timer = null;
      func();
    }, timeout);
  };
}

2. 解决方案

1. 直接return返回请求函数就OK了，防抖函数 代码如下

	let isTime = "" //time标识存放容器
	//请求防抖
	const AjaxShake = (fn, time) => {
	
		clearTimeout(isTime)
		return isTime = setTimeout(async () => {
			 await fn()
			console.log('定时对象', isTime)
		}, time)
		
	}

2. 使用（本人把函数放到vue的原型上了）

this.$u.utils.AjaxShake( ()=>{
					this.$u.api.CartsNum(item.id, {
						num: item.num
					})
				},500)

传一个空函数，里面是我们的请求函数。还有传时间差time
AjaxShake( function , int )