一分钟解决全局节流/防抖

节流防抖这个问题,不论是工作中还是面试中,还算是很常见的一个问题,但是在工作中他确实是常用的,例如在新增/删除/编辑都会用到,下面我会分享一个快速解决去全局节流/防抖的方式,因为他是封装的插件,工作中也常用,但是自己学习中还是老老实实了解一下他的实现原理吧.

1.下载lodash

$ npm i -g npm
$ npm i --save lodash

2.引入lodash

//引入到 main.js 文件中
import lodash from "lodash";

// 将全局lodash对象指向给Vue作用域下
app.config.globalProperties.$lodash = lodash; 

3.写防抖事件

//就是在你的事件前面加上vm.$lodash.debounce((),500),后面接上多久执行一次
    const addSubtaskClick = vm.$lodash.debounce(() => {
      if (inputData.value === '' || inputData.value === null) {
        return messageInfo.error('请输入内容！')
      } else {
        let childTaskList = [
          {
            title: inputData.value,
          },
        ]
        editTasks({ childTaskList: childTaskList })
        inputData.value = ''
        footerInput.value = false
        emit('modificationsClicl', code)

        // addSubtasks()
      }

      if (MyData.childTaskList.length === 0) {
        showSonMy.value = false
      }
      footerInput.value = false
      inputData.value = null
    }, 500)

4.写节流事件

//就是在你的事件前面加上vm.$lodash.debounce((),500)
  const handerClick = vm.$lodash.throttle((item, index) => {\
            activeCheck.value = index;\
            localStorage.setItem('teamMessage', JSON.stringify(item));\
            store.commit('common/teamMessageChange', JSON.stringify(item));\
            router.push('/myTask');\
        }, 500);

防抖节流的实现方式有很多很多,这只不过我常用的一种,希望能分享给大家