网站内链建设,上海网站搜索排名优化哪家好,wordpress输出副标题,视频制作专业软件防抖与节流#xff0c;应用场景有很多#xff0c;例如#xff1a;禁止重复提交数据的场景、搜索框输入搜索条件#xff0c;待输入停止后再开始搜索。 防抖
点击button按钮#xff0c;设置定时器#xff0c;在规定的时间内再次点击会重置定时器重新计时#xff0c;在规定…防抖与节流应用场景有很多例如禁止重复提交数据的场景、搜索框输入搜索条件待输入停止后再开始搜索。 防抖
点击button按钮设置定时器在规定的时间内再次点击会重置定时器重新计时在规定的时间没有再次点击才执行相关函数。规定时间内最后一次点击有效。
节流
点击button按钮执行相关函数。设置定时器在规定的时间内连续点击均无效定时器过后可以再次点击。规定时间内可点击一次第一次点击有效。 案例-防抖
Vue项目中使用自定义指令实现按钮防抖功能。
应用场景搜索框输入搜索条件待输入停止后再开始搜索。
/*
* 防抖规定时间内最后一次点击有效。
* param {?Number|300} time - 间隔时间毫秒
* param {Function} fn - 执行函数
* param {?String|click} event - 事件类型 例click
* param {Array} binding.value - [fn,event,time]
* 例el-button v-debounce[resetData,click,300]刷新/el-button
* 也可简写成el-button v-debounce[resetData]刷新/el-button
*/
// 注册一个全局自定义指令 v-debounce
Vue.directive(debounce, {// 当被绑定的元素插入到 DOM 中时……inserted: function (el, binding) {//binding.value使用自定义指令v-debounce时填写的参数//解构赋值定义了3个变量将参数数组按顺序进行赋值let [fn, event click, time 300] binding.valuelet timerel.addEventListener(event, () {//默认监听的事件为click//判断计时器是否存在存在则清除计时器。重新创建计时器到时间后执行函数fnif(timer){clearTimeout(timer)}timer setTimeout(() fn(), time)})}
})案例-节流
Vue项目中使用自定义指令实现按钮节流功能。
应用场景click事件禁止重复提交数据的场景。
/*
* 节流规定时间内可点击一次第一次点击有效。
* param {?Number|300} time - 间隔时间毫秒
* param {Function} fn - 执行函数
* param {?String|click} event - 事件类型 例click
* param {Array} binding.value - [fn,event,time]
* 例el-button v-throttle[resetData,click,300]刷新/el-button
* 传递参数则el-button v-throttle[()resetData(param),click,300]刷新/el-button
*/
// 注册一个全局自定义指令 v-throttle
Vue.directive(throttle, {// 当被绑定的元素插入到 DOM 中时……inserted: function(el, binding) {//binding.value使用自定义指令v-throttle时填写的参数//解构赋值定义了3个变量将参数数组按顺序进行赋值let [fn, event click, time 300] binding.valuelet timer null;el.addEventListener(event, () {//默认监听的事件为click//判断计时器是否存在不存在则执行函数fn创建计时器if (timer null) {fn();timer setTimeout(() timer null, time)}})}
})//方案二
/*** 按钮节流* 3秒内只有第一次点击有效防止重复提交数据。*/
//注册一个全局自定义指令 v-throttle-disabled
Vue.directive(throttle-disabled, {// 当被绑定的元素插入到 DOM 中时……inserted(el, binding) {let [event click, time 2 * 1000] binding.valueel.addEventListener(event, () {//默认监听click事件//当 dom元素el 非禁用状态时 将其设置为禁用状态同时设置计时器规定时间后默认2秒启用。if (!el.disabled) {el.disabled truesetTimeout(() {el.disabled false}, time)}})}
})组件中使用
在.vue文件中data、methods同级的位置添加如下配置
,
directives: {debounce: {//自定义指令名v-debounce// 指令的定义inserted: function(el, binding) {//binding.value使用自定义指令v-throttle时填写的参数//解构赋值定义了3个变量将参数数组按顺序进行赋值let [fn, event click, time 300] binding.valuelet timer null;el.addEventListener(event, () {//默认监听的事件为click//判断计时器是否存在不存在则执行函数fn创建计时器if (timer null) {fn();timer setTimeout(() timer null, time)}})}}
},全局引入
新建js文件
在项目中新建 myDirective.js 文件。通过export default暴露出来。
/** Author: qsdbl* Date: 2022-02-10* Description: 添加全局自定义指令。* 防抖v-debounce。节流v-throttle、v-throttle-disabled可能无效。* 示例el-button v-throttle[resetData]刷新/el-button使用默认配置监听click事件300毫秒内只会执行一次函数resetData* 传递参数el-button v-throttle[()resetData(param)]刷新/el-button*/
export default {install(Vue, Options) {/** 防抖规定时间内默认300毫秒最后一次点击有效。* param {?Number|300} time - 间隔时间毫秒* param {Function} fn - 执行函数* param {?String|click} event - 事件类型 例click* param {Array} binding.value - [fn,event,time]* 例el-button v-debounce[resetData,click,300]刷新/el-button* 也可简写成el-button v-debounce[resetData]刷新/el-button*/// 注册一个全局自定义指令 v-debounceVue.directive(debounce, {// 当被绑定的元素插入到 DOM 中时……inserted: function(el, binding) {//binding.value使用自定义指令v-debounce时填写的参数//解构赋值定义了3个变量将参数数组按顺序进行赋值let [fn, event click, time 300] binding.valuelet timerel.addEventListener(event, () {//默认监听的事件为click//判断计时器是否存在存在则清除计时器。重新创建计时器到时间后执行函数fnif (timer) {clearTimeout(timer)}timer setTimeout(() fn(), time)})}})/** 节流规定时间内可点击一次第一次点击有效。* param {?Number|300} time - 间隔时间毫秒* param {Function} fn - 执行函数* param {?String|click} event - 事件类型 例click* param {Array} binding.value - [fn,event,time]* 例el-button v-throttle[resetData,click,300]刷新/el-button* 传递参数则el-button v-throttle[()resetData(param),click,300]刷新/el-button*/// 注册一个全局自定义指令 v-throttleVue.directive(throttle, {// 当被绑定的元素插入到 DOM 中时……inserted: function(el, binding) {//binding.value使用自定义指令v-throttle时填写的参数//解构赋值定义了3个变量将参数数组按顺序进行赋值let [fn, event click, time 300] binding.valuelet timer null;el.addEventListener(event, () {//默认监听的事件为click//判断计时器是否存在不存在则执行函数fn创建计时器if (timer null) {fn();timer setTimeout(() timer null, time)}})}})/** 节流方案二通过禁用html标签规定时间内可点击一次第一次点击有效。* 应用在封装的组件中可能无效。* param {?String|click} event - 事件类型 例click* param {?Number|2000} time - 间隔时间毫秒* param {Array} binding.value - [event,time]* 例button v-throttle-disabled[]测试按钮/button*///注册一个全局自定义指令 v-throttle-disabledVue.directive(throttle-disabled, {// 当被绑定的元素插入到 DOM 中时……inserted(el, binding) {let [event click, time 2 * 1000] binding.valueel.addEventListener(event, () {//默认监听click事件//当 dom元素el 非禁用状态时 将其设置为禁用状态同时设置计时器规定时间后默认2秒启用。if (!el.disabled) {el.disabled truesetTimeout(() {el.disabled false}, time)}})}})}
}配置main.js文件
在入口文件main.js引入
//引入自定义指令方便全局使用
import myDirective from /static/js/myDirective.js;
Vue.use(myDirective);使用
这样就可以全局使用myDirective.js里面的自定义指令了示例
button v-debounce[debounceTest,click,3000]测试按钮-3秒/button
button v-debounce[()debounceTest(hi)]测试按钮/button笔记学习自51CTO-JackieDYH、vue 全局、局部引入
