js防抖、节流、防重复

防抖

在最后一次调用后的延迟时间内不再有新的调用时，才执行该函数。如果在这段时间内函数又被调用，则重新开始计时。

应用场景

输入框联想词

实现

安装lodash第三方库

npm i lodash -S

import _ from 'lodash';

search: _.debounce(function() {
    console.log('输入的内容是：', this.searchText);
}, 1000)

节流

节流函数则确保函数在指定的时间间隔内最多执行一次，可以用来控制函数执行的频率。

应用场景

滚动监听、页面resize监听、鼠标滑动等高频触发事件

实现

import _ from 'lodash';

myClick: _.throttle(function() {
    console.log('滚动');
}, 1000)

防重复

一段之间内只执行第一次操作，避免重复触发事件。

应用场景

连续点击按钮

实现方案一

自定义一个工具方法，防重复触发函数 utils/index.js

/**
 * 防重复调用函数
 * @param {*} fn function 执行函数
 * @param {*} time 防重复触发时间间隔
 */
// 默认是第一次触发
let isFirstClick = true;
export const preventDuplication = (fn, time = 1000) => {
  if (isFirstClick) {
    // 第一次触发后，立即更改isFirstClick为false，阻止后续连续触发
    isFirstClick = false;

    // 执行函数
    fn.apply(this, arguments);

    // 设置一个定时器，在指定延迟后重置 isFirstClick，让下一次点击可以被处理
    setTimeout(() => {
      isFirstClick = true;
    }, time);
  }
};

引用防重复函数并使用

import { preventDuplication } from './utils/index';

preventDuplication(() => {
    console.log("连续点击");
}, 1000);

实现方案二

Vue main.js全局挂载一个自定义指令

const app = createApp(App);
// 自定义放重复点击指令，点击后按钮禁用一段时间，仅限表单元素使用
app.directive('preventReClick', {
  mounted: function (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
        }, binding.value || 1000);
      }
    });
  }
});

如果是vue2，将mounted改为inserted即可

// Vue2
Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    // ...
  }
});

在业务组件表单元素添加v-preventReClick

<button @click="submit" v-preventReClick>保存</button>