首先什么是防抖?
防抖就是指☞触发事件后在n秒内函数只执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。说到防抖大家应该会想到节流,两者cp哈哈哈。
主要应用场景有:
a、scroll事件滚动触发,
b、搜索框输入查询
c、表单验证
d、按钮提交事件
e、浏览器窗口缩放,resize事件
什么是节流?
节流是指连续触发事件但是在n秒钟只执行一次。
主要应用场景:
a、DOM元素的拖拽功能实现
b、射击游戏类
c、计算鼠标移动的距离
d、监听scroll事件
function throttle(fn, delay){let timer;return function(){if (timer) {return;}let me = this;let _arg = arguments;timer = setTimeout(function(){fn.apply(me, _arg);timer = null;}, delay);}}
项目场景
在开发中,有些提交保存按钮有时候会在短时间内被点击多次,这样就会多次重复请求后端接口,造成数据的混乱,比如新增表单的提交按钮,多次点击就会新增多条重复的数据。
在日常的开发中,在很多表单的提交过程中,会有保存按钮的多次点击的情况,如果不做处理,会造成数据的多次创建的情况。
Vue项目中使用自定义指令实现按钮防抖功能,防止多次调接口
在directive.js文件import Vue from 'vue'/*按钮防抖动指令*/Vue.directive('debounce', {inserted(el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 3 * 1000)}})}})`
//页面中使用<template><div><el-button v-debounce>防抖</el-button></div></template><script>import debounce from '../../directive/test/debounce'</script>
防止多次调接口?
1.使用vue自定义指令,规定时间内只会执行一次。
2.在提交按钮添加loading,通过loading状态防止多次点击。
vue自定义指令:/v2/guide/custom-directive.html#ad