使用lodash实现节流和防抖的问题:

首先下载lodash插件

cnpm i lodash -S

在项目使用防抖

防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

一般我们应用在 搜索框防抖,如果用户只要输入一个字符,就会触发请求,不仅从资源上来说是很浪费的,而且实际应用中,用户也是输出完整的字符后,才会请求,下面我们优化一下:

<div class=''>
	<input type="text" v-model="value" @input="input" />
</div>
<script>
// 引入lodash
import _ from 'lodash'
export default {
    data() {
        return {
            value:''
        };
    },
    methods: {
        input:_.debounce(()=>{
            console.log(this);  // undefined
        },1000)
    }
};
</script>

❓❓在vue中methods箭头函数的this指向undefined问题:

以上代码在浏览器会输出undefined。哎,不应该指向window吗?
搞清楚这个问题,我们首先要知道:

  1. 箭头函数的this指向父级作用域的this
  2. vue默认开启了严格模式
  3. 全局作用域下的函数this指向window,在严格模式下指向undefined

所以在debounce里面不要使用箭头函数,我们要这样写才有效:

methods: {
    input:_.debounce(function(){
        console.log(this.value);
    },1000)
}

在项目使用节流

在一个单位时间内,只能触发一次

一般我们应用在 倒计时发送验证码,当用户点击按钮进行倒计时,不小心再次点击,这样倒计时会重新进行计数,这样对用户体验很不好,下面我们优化一下:

methods: {
    input:_.throttle(function(){
        console.log(this.value);
    },1000)
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐