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