vue中的防抖和节流

Posted 2023-04-04 qq_2524963996

防抖（debounce）是指在事件被触发 n 秒后才执行回调函数，如果在这段时间内再次触发了事件，则重新计时。防抖的主要作用是防止重复提交或重复操作。

引入  npm i --save lodash  网址 Lodash 简介 | Lodash 中文文档 | Lodash 中文网

<template>
  <div>
    <input type="text" v-model="searchQuery" @input="handleInput" />
  </div>
</template>

<script>
import  debounce  from 'lodash'

export default 
  data() 
    return 
      searchQuery: ''
    
  ,
  methods: 
    handleInput: debounce(function() 
      console.log('输入完成')
      // 在这里添加处理输入的逻辑
    , 500)
  

</script>

使用自定义指令 实现防抖

<template>
  <div>
    <input type="text" v-model="keyword" v-debounce-input="handleDebouncedInput" />
  </div>
</template>

<script>
export default 
  data() 
    return 
      keyword: '',
    
  ,
  methods: 
    // 在这里添加处理输入事件的逻辑
    handleDebouncedInput(keyword) 
      console.log('防抖回调函数', keyword)
    
  ,
  directives: 
    // 自定义指令实现防抖
    debounceInput: 
      inserted: function(el, binding) 
        let debounceTime = binding.arg || 500
        let debounceFn = _.debounce(function() 
          binding.value(el.value)
        , debounceTime)
        el.addEventListener('input', debounceFn)
      
    
  

</script>

vue中使用手写防抖

<template>
  <div>
    <input type="text" v-model="inputValue" @input="handleDebouncedInput" />
  </div>
</template>

<script>
export default 
  data() 
    return 
      inputValue: "",
      timeoutId: null,
    ;
  ,
  methods: 
    handleDebouncedInput() 
      clearTimeout(this.timeoutId);
      this.timeoutId = setTimeout(() => 
        this.doSomethingWithInput(this.inputValue);
      , 500); // 设置延迟时间为 500 毫秒
    ,
    doSomethingWithInput(inputValue) 
      console.log("Debounced input:", inputValue);
      // 在这里进行具体的操作
    ,
  ,
;
</script>

 vue中的throttle

<template>
  <div>
    <input type="text" v-model="inputValue" @input="handleThrottledInput" />
  </div>
</template>

<script>
import  throttle  from "./utils";

export default 
  data() 
    return 
      inputValue: "",
    ;
  ,
  methods: 
    handleThrottledInput: throttle(function() 
      console.log("Throttled input:", this.inputValue);
      // 在这里进行具体的操作
    , 500), // 设置延迟时间为 500 毫秒
  ,
;
</script>

函数节流

function throttle(func, delay) 
  let prevTime = 0;
  return function() 
    const context = this;
    const args = arguments;
    const currTime = Date.now();
    if (currTime - prevTime > delay) 
      func.apply(context, args);
      prevTime = currTime;
    
  ;

 它接受两个参数：一个是要执行的函数 func，另一个是节流的时间间隔 delay。当调用返回的函数时，它会检查当前时间与上一次调用的时间间隔是否超过了节流的时间间隔，如果超过了，则执行传入的函数 func，否则不执行。

 vue中使用节流的自定义指令  针对于点击按钮的效果

<template>
  <button v-throttle-click="handleClick">Click me</button>
</template>

<script>
export default 
  directives: 
    'throttle-click': 
      bind: function (el, binding) 
        const delay = parseInt(binding.arg) || 1000; // 获取节流延迟时间，如果未传递参数，则默认为1秒
        let timeout = null;

        function handleClick() 
          if (timeout) 
            clearTimeout(timeout);
          

          timeout = setTimeout(() => 
            binding.value.call(this);
          , delay);
        

        el.addEventListener('click', handleClick);
      
    
  ,
  methods: 
    handleClick() 
      console.log('Clicked!');
    
  

</script>

//还可以  定义时间
<button v-throttle-click:500="handleClick">Click me</button>

vue中使用库点击按钮节流

import  throttle  from 'lodash';

export default 
  methods: 
    handleClick: throttle(function() 
      console.log('Button clicked!');
    , 1000)
  

在上面的代码中，throttle 函数接受两个参数：真正的点击事件处理函数和一个时间间隔，单位为毫秒。throttle 函数将返回一个新的函数，这个函数将在指定的时间间隔内最多执行一次真正的点击事件处理函数。

VUE中的函数的防抖和节流 以及应用场景

先看看概念

函数防抖(debounce)：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

应用场景：

• search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

函数节流(throttle)：

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

应用场景：

• 鼠标不断点击触发，mousedown(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

我们将防抖和节流函数写在utils文件夹下面需要的时候引用

export function _debounce(fn, delay) {
//防抖
  var delay = delay || 200;
  var timer;
  return function () {
    var th = this;
    var args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      timer = null;
      fn.apply(th, args);
    }, delay);
  };
}
// 节流
export function _throttle(fn, interval) {
  var last;
  var timer;
  var interval = interval || 200;
  return function () {
    var th = this;
    var args = arguments;
    var now = +new Date();
    if (last && now - last < interval) {
      clearTimeout(timer);
      timer = setTimeout(function () {
        last = now;
        fn.apply(th, args);
      }, interval);
    } else {
      last = now;
      fn.apply(th, args);
    }
  }
}

引用

<template>
    <div>
        <input type="button" value="+1" @click="add">
        <br>
        <input type="button" value="-1" @click="reduce">
    </div>
</template>

<style>
    input{
        width: 200px;
        height: 20px;
    }
</style>

<script>
  import { _debounce } from ‘@/utils/debounce‘
  import { _throttle } from ‘@/utils/debounce‘
  import { mapState, mapActions } from ‘vuex‘
    export default {
      computed: {
        ...mapState({
//          kindlist: ({ kind: { kindlist } }) => kindlist, //{ kind: { kindlist } }=state.kind,kindlist
//          brandlist: (state) => state.kind.brandlist,
//          prolist: ({ kind }) => kind.prolist  //kind=state.kind
          count:(state)=>state.count.count,
        })
      },
      methods:{
        add:_debounce(function(_type, index, item){  //防抖
           this.$store.dispatch(‘count/add‘)
        },2000),
        reduce:_throttle(function(){
            this.$store.dispatch(‘count/reduce‘)
          },2000)
        },
    }
</script>