JavaScript 防抖 (vue中写法总结)

JavaScript 防抖与节流

1 防抖 (vue中写法总结)

1.1 立即执行

1.1.1 setTimeout

const debounce = (func, context, delay = 500) => {
  return (function () {
    if (context.timeout) {
      clearTimeout(context.timeout);
    } else {
      func();
    }
    context.timeout = setTimeout(() => {
      context.timeout = null;
    }, delay);
  })();
};
1
2
3
4
5
6
7
8
9
10
11
12

1.1.1.1 vue2

// 使用-vue2
data() {
  return {
    timeout: null // 关键在这里
  }
}

debounce(fun, this);
1
2
3
4
5
6
7
8

1.1.1.2 vue3

vue3使用this

// 使用-vue3
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();

const _this = instance.appContext.config.globalProperties;

debounce(fun, _this);
1
2
3
4
5
6
7

1.2 非立即执行

1.2.1 setTimeout

// 非立即执行
const debounce = (func, context, delay = 500) => {
  return (function () {
    if (context.timeout) {
      clearTimeout(context.timeout);
    }
    context.timeout = setTimeout(() => {
        func();
        context.timeout = null; // 必须要清空，否则影响另一事件
      }, delay);
  })();
};
1
2
3
4
5
6
7
8
9
10
11
12

1.2.1.1 vue2

// 使用-vue2
data() {
  return {
    timeout: null // 关键在这里
  }
}

debounce(fun, this);
1
2
3
4
5
6
7
8

1.2.1.1 vue3

vue3使用this

// 使用-vue3
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();

const _this = instance.appContext.config.globalProperties;

debounce(fun, _this);
1
2
3
4
5
6
7

1.2.2 e.timeStamp

1.2.2.1 vue2

// 非立即执行
const debounce = (func, lastTimeStamp, timeStamp, delay = 500) => {
  this.lastTimeStamp = timeStamp;
  setTimeout(() => {
    if (this.lastTimeStamp === timeStamp) {
      func();
    }
  }, delay);
};
1
2
3
4
5
6
7
8
9

// 使用-vue2
data() {
  return {
    lastTimeStamp: null // 标记当前事件函数的时间戳
  }
}

debounce(fun, lastTimeStamp, e.timeStamp);
1
2
3
4
5
6
7
8

1.2.2.2 vue3

// 非立即执行
const debounce = (func, lastTimeStamp, timeStamp, delay = 500) => {
  lastTimeStamp.value = timeStamp;
  setTimeout(() => {
    if (lastTimeStamp.value === timeStamp) {
      func();
    }
  }, delay);
};
1
2
3
4
5
6
7
8
9

// 使用-vue3
const lastTimeStamp = ref(null);

debounce(fun, lastTimeStamp, e.timeStamp);
1
2
3
4

1.2.3 手动加锁

执行完成后锁才打开

const locker = ref(false);

if (locker.value) return;
locker.value = true;

fun();

setTimeout(() => {
    locker.value = false; //自动解锁
}, 500);
1
2
3
4
5
6
7
8
9
10

1.3 立即执行、非立即执行统一封装

/**
 * 防抖
 * @param {Function} func 执行函数
 * @param {Object} context 获取当前 this
 * @param {Boolean} imme 是否立即执行
 * @param {Number} delay 延迟时间
 * @returns
 */

const debounce = (func, context, imme, delay = 500) => {
  return (function () {
    if (context?.timeout) {
      clearTimeout(context.timeout);
    }
    if (imme) {
      // 立即执行
      if (!context.timeout) {
        func();
      }
      context.timeout = setTimeout(() => {
        context.timeout = null;
      }, delay);
    } else {
      // 非立即执行
      context.timeout = setTimeout(() => {
        func();
        context.timeout = null; // 必须要清空，否则影响另一事件
      }, delay);
    }
  })();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31