需求
创新互联从2013年创立，先为鲅鱼圈等服务建站，鲅鱼圈等地企业，进行企业商务咨询服务。为鲅鱼圈企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
在业务中，会碰到许多点击请求的情况，在请求前改变一个lock变量（在lock变回来之前，点击无效），在请求回调中再改变lock.以确保在，请求回来之前，不会重复请求。或者类似的点击节流业务
实现方式
指令
指令//getData是函数名，a是传入的参数 directives: { demo: { bind(el: Element, binding: any, vnode: VNode) { const that: any = vnode.context // console.log(binding, vnode) // console.log(binding.arg, binding.value) if (!that[binding.arg].isBind){ // 打上标记，如果已经转换了，就不转了 that[binding.arg] = deb(that[binding.arg]) that[binding.arg].isBind = true } el.addEventListener('click', function T(event: Event): void{ that[binding.arg](binding.value) }) }, }, },
组件
子组件
父组件
import { Component, Vue } from 'vue-property-decorator'; import throttleAndDebounce from '@/components/throttleAndDebounce.vue'; @Component({ components: { throttleAndDebounce, }, }) export default class home extends Vue { public getData(e: any){ console.log('异步数据', e) } }
plugin
函数
function deb(fn: function){
let lock: number
return (e) => {
if (lock){
clearTimeout(lock)
}
console.log('创建闭包延迟执行')
lock = setTimeout(() => {
fn(e)
}, 1500)
}
}
export {deb}
组件内使用
function
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。