彪码之 Javascript 防抖与 Javascript 节流

最新推荐文章于 2024-07-20 18:16:53 发布

彪码

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量508

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/notBackground/article/details/121491019

版权

防抖（debounce）：

用户在进行触发滚动、输入、点击等等事件的时候，他如果一直触发的情况下，那么就会一直进行请求，刷新数据，这个时候用户很可能会出现响应跟不上请求的速度很可能就会导致页面卡死，这样就影响到了用户的体验感，所以我们防抖的原理呢就是在你触发一个事件的时候，他不会立刻就去执行，而是会进行一个延迟，在这个延迟进行当中用户如果又去触发了这一个事件，那么这个延迟将重新开始计时，计时结束执行功能

来看一段代码

  function debounce(func,delay=1000){
        return function (args){
            let that=this
            let arg=args
            clearTimeout(func.id)
            func.id=setTimeout(()=>{
                func.apply(that,arg)
            },delay)

        }
    }

这就是简单的防抖操作，

<body>
    <input type="text"  class="inp">
    <!-- 我用的是input标签 -->
</body>

我们可以给他定义class 或 id ，在我们定义class的时候我们应该用 document.getElementsByClassName('类名') 我们获取到的是数组,所以我们如果有多个相同的类名要注意一下这里

定义Id的话是

document.getElementById('Id名') 获取到是Dom元素

下图使用方法：

 document.querySelector('.inp').onkeyup=debounce(function (){//进行的键盘抬起事件 (keyup)
        console.log(111);
    },3000)

效果如下:

节流（throttle）：

用户在一直高频触发一个事件的时候，事件会随着用户的操作而一直去执行，如果是接口的话，也是会产生响应跟不上请求的速度，做节流的目的是我们一直高频触发，但是事件会以一个规定的速度去被执行，不然会影响网页速度，也可能出现网页崩溃

以下是节流代码：

function throttle(func,delay=1000){
    let last,difertimer;
return function (){
    let start=Date.now()
    let current=start-last;
    if(!(current<delay)){
        last=start
func()
    }
}
}

下图使用方法：

  document.querySelector('#inp').onkeyup=throttle(function (){//进行的键盘抬起事件 (keyup)
        console.log(111+document.querySelector('#inp').value);
    },1000)

下图效果展示：

vue2以及vue3的使用方法，在这里我是引用的插件

npm i --save lodash //安装lodash插件

vue2 跟 vue3 的事件都是一样的，所以在这两个里面我用的都是下面这段代码

<template>
  <div class="home">
<input type="text" v-model="val" @input="setval">
  </div>
</template>

Vue2的防抖使用方法如下：

<script>
// @ is an alias to /src

import _ from 'lodash'
export default {
  name: 'Home',
  components: {
 
  },
  data() {
    return {
      value:'',
      debounce:''
    }
  },
  created(){
this.debounce=_.debounce(()=>{
         console.log(this.value);
       },1000)
  },
  methods:{
     setval(){
       this.debounce()
    }
  }
}
</script>

Vue2的节流使用方法如下：

<script>
// @ is an alias to /src

import _ from 'lodash'
export default {
  name: 'Home',
  components: {
 
  },
  data() {
    return {
      value:'',
      throttle:''
    }
  },
  created(){
this.throttle=_.throttle(()=>{
         console.log(this.value);
       },1000)
  },
  methods:{
     setval(){
       this.throttle()
    }
  }
}
</script>

vue3的防抖使用方法如下：

import {ref} from 'vue'
import _ from 'lodash'
export default {
  name: 'Home',
  components: {
 
  },
  setup() {
    const val=ref('')
    const setval= _.debounce(()=>{
         console.log(val.value);
    } ,1000) 
    return {
      val,
      setval
    }
  },
  created(){
  },
  methods:{
  
  }
}
</script>

vue3的节流使用方法如下：

<script>
// @ is an alias to /src
import {ref} from 'vue'
import _ from 'lodash'
export default {
  name: 'Home',
  components: {
 
  },
  data() {
    const value=ref('')
    const setval=_.throttle(()=>{
         console.log(this.value);
       },1000)
    return {
      value,
      setval
    }
  },
  created(){

  },
  methods:{
   
  }
}
</script>

结束语：单调的攀登动作会感到厌倦，但每一步都是接近顶峰

彪码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
彪码之 Javascript 防抖与 Javascript 节流

防抖（debounce）：用户在进行触发滚动、输入、点击等等事件的时候，他如果一直触发的情况下，那么就会一直进行请求，刷新数据，这个时候用户很可能会出现响应跟不上请求的速度很可能就会导致页面卡死，这样就影响到了用户的体验感，所以我们防抖的原理呢就是在你触发一个事件的时候，他不会立刻就去执行，而是会进行一个延迟，在这个延迟进行当中用户如果又去触发了这一个事件，那么这个延迟将重新开始计时，计时结束执行功能来看一段代码 function debounce(func,delay=100
复制链接

扫一扫