vue使用防抖节流
提示:以下是本篇文章正文内容,下面案例可供参考
一、防抖函数,规定时间内点击多次,只执行最后一次
二、节流函数,连续点击多次,规定时间内只执行一次
代码如下(示例):
1.再utils文件里添加common.js,复制下方代码
/**
* @function 防抖函数,规定时间内点击多次,只执行最后一次
* @method debounce(fn,delay);
* @param {function} fn 需要执行的函数
* @param {number} [delay=300] 等待时间(毫秒),默认等待时间为300毫秒,为0的话就不需要防抖函数了
* @example
const func = () => {
console.log("1234567");
};
const dianji = debounce(func, 500);
*/
const debounce = (fn, delay = 300) => {
let timer = null; // 创建一个标记用来存放定时器的返回值
return function () {
// 再次执行的时候把前一个 setTimeout clear 清空掉
clearTimeout(timer);
// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发,就不会执行 fn 函数
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
// timer = setTimeout(fn, delay) // 简化写法
};
}
/**
* @function 节流函数,连续点击多次,规定时间内只执行一次
* @method throttle(fn,delay);
* @param {function} fn 需要执行的函数
* @param {number} [delay=300] 等待时间(毫秒),默认等待时间为300毫秒
* @example
const func = (aa) => {
console.log(aa);
};
const dianji = throttle(()=>{func("12345")}, 500);
*/
const throttle = (fn, delay = 300) => {
let timer = null; // 创建一个标记用来存放定时器的返回值
return function () {
// 判断timer标记是否为null,只有为null时才让他执行一次里面的函数
if (!timer) {
// 将外部传入的函数的执行放在setTimeout中
timer = setTimeout(() => {
// 调用传入的函数fn
// 最后在setTimeout执行完毕后再把标记timer设置为null,表示可以执行下一次循环了。
fn.apply(this, arguments); //或者使用fn()
timer = null;
}, delay);
}
};
}
export { debounce, throttle } //可解构
export default { throttle, debounce } //不可解构
2.再单页面使用
代码如下(示例):
<template>
<div>
<div style="padding: 100px">
<button @click="dianji">防抖和节流</button>
</div>
</div>
</template>
<script>
// // vue2.0写法
// import { throttle, debounce } from "@/utils/common.js";
// export default {
// methods: {
// // 防抖方法
// dianji() {
// debounce(this.func, 1000);
// // throttle(this.func, 1000);
// console.log(11111);
// },
// func() {
// console.log("ssssswdsa");
// },
// },
// };
</script>
<script setup>
// vue3.0写法(使用vite2.0构建的项目)
// import { throttle, debounce } from "@/utils/common.js"; //解构引用
import JM from "@/utils/common.js"; //作为整体引入
const func = () => {
console.log("ssssswdsa");
};
const dianji = JM.debounce(()=>{
func();
}, 500);
//const dianji = JM.throttle(func, 500);
</script>
<style>
</style>
该处使用的url网络请求的数据。
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。