网站的分享按键,哪个网站可以做临时工,做百度网站需要多少钱,网站开发学什么语言目录
1、防抖
2、debounce - 封装函数
3、v-debounce 全局自定义指令 1、防抖 推荐文章 #xff1a; https://blog.csdn.net/weixin_58099903/article/details/119902796 2、debounce - 封装函数 utils / tools.js /*** 函数防抖 是n秒后延迟执行#xff0c;多用于页面scr…目录
1、防抖
2、debounce - 封装函数
3、v-debounce 全局自定义指令 1、防抖 推荐文章 https://blog.csdn.net/weixin_58099903/article/details/119902796 2、debounce - 封装函数 utils / tools.js /*** 函数防抖 是n秒后延迟执行多用于页面scroll滚动窗口resize防止按钮重复点击* param {Function} fn 是我们需要包装的事件回调* param {Number} delay 是每次推迟执行的等待时间* returns*/
export default function (fn, delay) {// 记录上一次触发的时间var timer null;return function () {// 保留调用时的this上下文var context this;// 保留调用时传入的参数var args arguments;// 每次事件被触发时都去清除上一次延时器if (timer) clearTimeout(timer);// 设立新的定时器timer setTimeout(function () {fn.apply(context, args);}, delay);};
}; 使用 templatediv!-- debounce封装函数用法 --el-button clicksubmitForm(item.id)防抖/el-button/div
/templatescript
import { debounce } from ../utils/tools;export default {methods: {submitForm: debounce(function (id) {console.log(防抖, id);}, 1000),},
};
/script 3、v-debounce 全局自定义指令 utils / directives.js /*** v-debounce 防抖指令 防止重复点击* param {Function} fn 方法名【必传】* param {*} params 函数参数* param {String} event 触发方式click* param {Number} delay 防抖时间1000*/
const debounce Vue.directive(debounce, {inserted: function (el, binding) {let timer; // 定时器const { fn, params, event, delay } binding.value;el.addEventListener(event || click, () {// 每次事件被触发时都去清除之前旧的定时器if (timer) clearTimeout(timer);// 设立新的定时器if (binding.value.hasOwnProperty(params)) {// 传参用法v-debounce{ fn: 方法名, params: 传参, delay: 防抖时间 }timer setTimeout(() {fn(params);}, delay || 1000);} else {// 不传参用法v-debounce方法名timer setTimeout(() {binding.value();}, 1000);}});},
});export { debounce }; 使用 // main.js 中引用
import ./utils/directives; !-- 不传参用法 --
el-button v-debouncesubmitForm防抖/el-button
!-- 传参用法 --
el-buttonv-debounce{fn: submitForm,params: item.id,event: click,delay: 1000,}防抖/el-button
methods: {submitForm (id) {console.log(防抖, id);},},
