1.防抖（立即执行/非立即执行）

什么是防抖：一个事件在触发后，设置定时器，若n秒内该事件没有再次发生，那么执行这个函数，如果n秒内该事件再次发生了，那么定时器重新开始计时。

应用

  • 每次 resize / scroll 触发统计事件
  • 文本输入的验证 （连续输入文字后发送AJAX请求进行验证，验证一次就好）
  1. //防抖(非立即执行)
  2. function debounce(fn, delay = 500) {
  3.     let timer = null;
  4.     return function () {
  5.         if (timer) {
  6.             clearTimeout(timer);
  7.             timer = null
  8.         }
  9.         timer = setTimeout(() => {
  10.             fn.apply(this, arguments);
  11.             timer = null;
  12.         }, delay)
  13.     }
  14. }
  1. //防抖(立即执行)
  3. function debounce(fn, delay = 500) {
  4.     let timer = null;
  5.     let flag = true
  6.     return function () {
  7.         if (timer) {
  8.             clearTimeout(timer);
  9.             timer = null
  10.         }
  11.         if (flag === true) {
  12.             fn.apply(this, arguments);
  13.             flag = false
  14.         }
  15.         timer = setTimeout(() => {
  16.             flag = true
  17.             timer = null
  18.         }, delay)
  19.     }
  20. }
  2. /**
  3.  * 防抖函数
  4.  * 
  5.  * - 立即执行
  6.  * - 非立即执行
  7.  * @param {*} fn 
  8.  * @param {*} delay 
  9.  * @param {*} isImmediate 
  10.  */
  11. function debounce(fn, delay = 500, isImmediate = true) {
  12.     let timer = null;
  13.     let flag = true
  14.     if (isImmediate === true) {
  15.         return function () {
  16.             if (timer) {
  17.                 clearTimeout(timer);
  18.                 timer = null
  19.             }
  20.             if (flag === true) {
  21.                 fn.apply(this, arguments);
  22.                 flag = false
  23.             }
  24.             timer = setTimeout(() => {
  25.                 flag = true
  26.                 timer = null
  27.             }, delay)
  28.         }
  29.     } else {
  30.         return function () {
  31.             if (timer) {
  32.                 clearTimeout(timer);
  33.                 timer = null
  34.             }
  35.             timer = setTimeout(() => {
  36.                 fn.apply(this, arguments);
  37.                 timer = null;
  38.             }, delay)
  39.         }
  40.     }
  41. }

2.节流（立即执行/非立即执行）

什么是节流：一个事件在n秒内被多次触发，但绑定的函数在期间只会执行一次（也就是降低函数的执行频率）
应用

  • 与mousemove keyup/keydown 等相密切联系的函数
  1. //定义函数
  2. //节流(非立即执行)
  3. function throttle_1(fn,wait){
  4.   var flag = true;
  5.   return function(){
  6.     if(flag == true){
  7.       flag = false
  8.       var timer = setTimeout(() => {
  9.         fn.apply(this,arguments)
  10.         flag = true
  11.       },wait)
  12.     }
  13.   }
  14. }
  1. //节流(立即执行)
  2. function throttle_2(fn,wait){
  3.   var flag = true;
  4.   var timer = null;
  5.   return function(){
  6.     if(flag) {
  7.       fn.apply(this,arguments);
  8.       flag = false;
  9.       timer = setTimeout(() => {
  10.         flag = true
  11.       },wait)
  12.     }
  13.   }
  14. }
  1. //节流(合并)
  2. function throttle_merge(fn,wait = 500,isImmediate = false){
  3.   var flag = true;
  4.   var timer = null;
  5.   if(isImmediate){
  6.     return function(){
  7.       if(flag) {
  8.         fn.apply(this,arguments);
  9.         flag = false;
  10.         timer = setTimeout(() => {
  11.           flag = true
  12.         },wait)
  13.       }
  14.     }
  15.   }
  16.   return function(){
  17.     if(flag == true){
  18.       flag = false
  19.       var timer = setTimeout(() => {
  20.         fn.apply(this,arguments)
  21.         flag = true
  22.       },wait)
  23.     }
  24.   }
  25. }

在vue项目中methods中使用

第一步
image.png

第二步
用这种方式写函数
image.png