Vue项目--防抖与节流

1.防抖:用户操作很频繁,但是只在最后执行一次

2.节流:用户操作很频繁,将多次操作变成少量操作,在一段时间内只允许触发一次(可以给浏览器充分的时间解析代码,可以理解成技能的冷却时间)

3.实现:安装lodash包

将要防抖的函数包在lodash防抖函数_.debounce(fn,1000)里,经过包裹后依然返回一个函数,这个函数就可以防抖了。

将要节流的函数包在lodash节流函数_.throttle(fn,1000)里,经过包裹后依然返回一个函数,这个函数就可以节流了。

input.oninput =_.debounce(function(){
    console.log('防抖')
},1000);

input.oninput =_.throttle(function(){
    console.log( '节流')
},1000);

4.创建项目时,已经有了lodash包在modules里面

import throttle from 'lodash/throttle'

changeBackgroundcolor:throttle(function(index){
    this.mouseoverIndex = index;
},50),

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值