表单内容改变 节流操作

一般情况下输入内容后，筛选对应的数据内容，如果每次输入每次请求过于频繁，使用节流的方式来减少请求的情况；

watch: {
	  'params.search'(newVal,oldVal){
		  //添加空格不做处理
		  if(newVal.trim() == oldVal.trim()) return;
		  // 输入框防抖 
		  clearTimeout(this.debounceTimer);
		  // 每次进来的时候都将之前的清除掉，如果还没到毫秒的时候就将之前的清除掉，
		  // 这样就不会触发之前setTimeout绑定的事件， 
		  // 如果超过毫秒，之前的事件就会被触发下次进来的时候同样清除之前的timer
		  this.debounceTimer = setTimeout(()=>{
			  //输入框没值了，清空搜索框条件数据
			  this.getStorkList(this.params);
		  },500) //几毫秒进行
	  }

	},

方法二：

let _throttleRunning = null, _debounceTimeout = null
/**
 * 防抖
 * @param {Function} 执行函数
 * @param {Number} delay 延时ms
 */
export const debounce = (fn, delay= 500) => {
  clearTimeout(_debounceTimeout)
  _debounceTimeout = setTimeout(() => {
    fn()
  }, delay)
}
/**
 * 节流
 * @param {Function} 执行函数
 * @param {Number} delay 延时ms
 */
export const throttle = (fn, delay= 500) => {
  if (_throttleRunning) {
    return
  }
  _throttleRunning = true
  fn()
  setTimeout(() => {
    _throttleRunning = false
  }, delay)
}

方法三

let timerNull = null
export function debounceAnd(func, wait, immediate = false) {
  if(timerNull) clearTimeout(timerNull)
  if (immediate) {
    // 节流
    let callNow = !timerNull
    timerNull = setTimeout(() => {
      timerNull = null
    }, wait)
    if (callNow) typeof func === 'function' && func();
  } else {
    // 防抖
    timerNull = setTimeout(() => {
      typeof func === 'function' && func()
    }, wait)
  }
}

仅供参考，内容待完善！