在vue中使用防抖和节流
方法一：
【在vue中使用防抖和节流】1、方法一：封装到utils.js中
/**
* //防抖---非立即执行版：
*触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
* */
export function debounce1 (fn, delay) {
let timer= null;
return function () {
let args = arguments;
let context = this;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
}
}
//防抖---立即执行版：
/**
* 立即执行版的意思是触发事件后函数会立即执行，* 然后 n 秒内不触发事件才能继续执行函数的效果。
*this:让 debounce 函数最终返回的函数 this 指向不变
* arguments : 参数
* */
export function Debounce2(func,wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
}/**
* 时间戳版：
* */export function _throttle(func, wait) {
let previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}
}/**
*
* 定时器版:s
*
* */export function Throttle2(func, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}}
}2、在vue组件中引入
import {debounce} from '@/utils/utils.js'
3、在组件中使用
文章图片
文章图片
[参考链接]https://blog.csdn.net/qq_42306443/article/details/102909376
[参考链接]https://blog.csdn.net/qq_34764577/article/details/82952368
方法二：使用自定义指令directive 1、在main.js中全局注册
//在持续触发事件的过程中，函数不会立即执行，并且每 2s 执行一次，在停止触发事件后，函数还会再执行一次。
Vue.directive('throttle', {
bind: (el, binding) => {
let throttleTime = binding.value;
// 节流时间
if (!throttleTime) { // 用户若不设置节流时间，则默认2s
throttleTime = 1000;
}
let cbFun;
el.addEventListener('click', event => {
if (!cbFun) { // 第一次执行
cbFun = setTimeout(() => {
cbFun = null;
}, throttleTime);
} else {
event && event.stopImmediatePropagation();
}
}, true);
},
});
2、在组件中使用：
文章图片
文章图片
methods:{
getValidCaptcha (){
this.$http({
method:'post',
params:{},
url:'/api/json/capcha/captcha'
}).
then(res =>{
if (res.data.code === 200) {
this.codeImg = 'data:image/png;
base64,' + res.data.data.captchaImg
this.captchaId = res.data.data.captchaId
} else {
}
});
},
}[参考链接]https://juejin.im/post/5ce3e400f265da1bab298359#heading-3
推荐阅读
- 热闹中的孤独
- 你到家了吗
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 闲杂“细雨”
- 杜月笙的口才
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 赢在人生六项精进二阶Day3复盘
- 祖母走了