js 防抖和节流

ᝰꫀꪶꪖρડ꧖ꦿ373

于 2023-02-23 15:09:30 发布

阅读量243

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_71280597/article/details/129123580

版权

防抖

作用：前面的所有的触发都会被取消，最后一次执行在规定的时间之后才会触发，也就是说，如果连续快速地触发多次，只会执行最后那一次。

现在页面有一个输入框和一个按钮，完成以下功能：

在输入框输入内容时，自动触发事件，发送请求；

在点击“搜索”按钮时，发送请求；

<template>
  <div class="main">
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
    <el-button type="plain" @click="search">搜索</el-button>
  </div>
</template>
 
<script>
export default {
  name:'A',
  data(){
    return {
      inputVal:''
    }
  },
  methods:{
    //输入框输入触发事件
    inputChange(val){
      console.log('---输入框内容---',val)
      console.log('---发送请求---')
    },
 
    //点击按钮发送请求
    search(){
      console.log('---发送请求---')
    }
  }
}
</script>

此时发现，输入了三个字符，请求确发送了三次，浪费资源及性能，对于用户体验感是及其不友好的。

再看点击“搜索按钮”。我快速点击按钮多次，会有以下现象：

优化方案：

1、在输入框连续输入时内容，确保输入停止后过了1s再触发事件或发送请求；

2、点击“搜索”按钮，发送请求，确保无论连续点击多少次，只能过了1s后再点击才能触发。

对于优化1，我们使用防抖；对于优化2，我们使用节流。

防抖的使用：

//防抖实现
export default function debounce(fn,delay){
  let timer = null
  return function() {  //借助闭包
    let th = this;
    let args = arguments;
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      fn.apply(th, args)
    },delay)
  }
}

然后在页面中导入并使用。

<template>
  <div class="main">
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
    <el-button type="plain" @click="search">搜索</el-button>
  </div>
</template>
 
<script>
import debounce from '../../util/debounce'
export default {
  name:'A',
  data(){
    return {
      inputVal:''
    }
  },
  methods:{
    /*防抖：
     *前面的所有的触发都会被取消，最后一次执行在规定的时间之后才会触发，
     *也就是说，如果连续快速的触发多次，只会执行一次
    */
    inputChange:debounce(function(val){       //使用自定义实现的防抖功能
      console.log('---输入框内容---',val)
      console.log('---发送请求---') 
    },1000),  //延迟执行时间可以视具体情况而定
 
    search(){
      console.log('---发送请求---')
    }
  }
}
</script>

快速使用防抖

那么问题来了，如果不会写防抖实现方法，有没办法使用防抖呢？答案是必须的！

其实我们在创建vue项目的时候已经引入了这个功能。

查看项目目录，找到node_modules文件夹（npm install之后生成），在里面找到lodash文件夹，往下找，你会找到一个debounce.js，这个就是防抖的实现方法

现在验证一下，将自定义的防抖函数注释，导入lodash里面的debounce.js

<template>
  <div class="main">
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
    <el-button type="plain" @click="search">搜索</el-button>
  </div>
</template>
 
<script>
import debounce from 'lodash/debounce'   //导入lodash中的debounce
//import debounce from '../../util/debounce'    //注释自定义方法，进行验证
export default {
  name:'A',
  data(){
    return {
      inputVal:''
    }
  },
  methods:{
    inputChange:debounce(function(val){     //lodash中的debounce
      console.log('---输入框内容（lodash）---',val)
      console.log('---发送请求---') 
    },1000),
    
    search(){
      console.log('---发送请求---')
    }
  }
}
</script>

节流
作用：在规定的时间间隔范围内不会重发触发回调，只有大于时间间隔才会触发回调，也就是说，把频发触发变成少量触发。

上面使用防抖优化了输入框连续输入时多触发的问题，那么优化多次点击按钮在规定的时间间隔内只触发一次，我们需要用到节流。

节流的使用

同样的，先实现功能，在阐述原理。现在，我们在util文件夹新建一个文件throttle.js，实现节流方法并导出。

//节流实现
export default function throttle(fn,delay){
  let flag = true
  return function() {
    let th = this;
    let args = arguments;
    if(!flag){
      //未超过时间间隔，flag无效，不执行fn
      return false 
    }
    fn.apply(th, args)
    flag = false    //在时间间隔内把状态位flag设为无效（false）
    setTimeout(() => {
      flag = true   //超过时间间隔把状态位flag设为有效（true）
    }, delay)
  }
}

然后在页面中导入，并修改功能实现

<template>
  <div class="main">
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
    <el-button type="plain" @click="search">搜索</el-button>
  </div>
</template>
 
<script>
import throttle from '../../util/throttle'
export default {
  name:'A',
  data(){
    return {
      inputVal:''
    }
  },
  methods:{
    /*节流：
     *在规定的时间间隔范围内不会重发触发回调，只有大于时间间隔才会触发回调
     *也就是说，把频发触发变成少量触发
    */
    search:throttle(function(){
      console.log('---发送请求---')
    },1000)    //可根据具体设置时间间隔
  }
}
</script>

此时只打印一次，相当于只发送一次请求，相比于之前的32次，服务器是不是“开心”极了。

那么具体实现原理是怎样的呢？以下实现原理对初学者而言可能比较难理解，需要掌握js知识与vue的具体工作机制，可以先学会使用，再慢慢理解。

//节流实现
export default function throttle(fn,delay){
  //有效标志，用来判断是否可以允许下一次执行，true表示允许，false表示禁止
  let flag = true
  //借助闭包，使得变量flag不被回收
  return function() {
    //保存当前环境下的实例对象，this即为引入该方法的那个组件实例对象
    let th = this;
    //保存传入参数
    let args = arguments;
    //如果flag为false，不允许执行fn()
    if(!flag){
      //未超过时间间隔，flag无效，不执行fn()
      return false 
    }
    fn.apply(th, args)
    //在时间间隔内把状态位flag设为禁止（false）
    flag = false
    setTimeout(() => {
      //超过时间间隔把状态位flag设为允许（true）,这样下次就能执行fn()了
      flag = true
    }, delay)
  }
}

快速使用节流

是的没错，lodash里面也有节流方法，可以直接使用，效果与自定义节流方法一致