关于javascript:Vue中函数节流

1. 通过回调函数复原按钮可点击 (可用于限度发送 http 申请，即期待 HTTP 申请返回后执行回调复原按钮可点击)
节流函数:

/**
按钮点击限度(自主设置可点击 -- 函数节流)
@param {Fun} callback 回调函数
@return
*/
const btnlimit = function (callback) {
    var isDis
    return function (...arg) {if (!isDis) {
            isDis = true    
            callback.call(this, arg, function () {isDis = false})
        }
    }
}

应用示例:

<template>
    <button @click="onSubmit">{{value}}</button>
</template>
<script>
     export default {data() {
            return {value: '发送 HTTP 申请'}
        },
        methods: {onSubmit: btnlimit(function(e, callback) {   // 此处必须应用 function 不能应用箭头函数
                this.value += '1'
                setTimeout(()=> {callback()   // 此处回调执行后点击才会持续发送 http 申请
                }, 2000)
            })
        }
    }
</script>

2. 通过设置工夫复原按钮可点击 (可用于限度频繁触发的 dom 事件，比方 onscroll 事件)
节流函数:

/**
    按钮点击限度(设置工夫 -- 函数节流)
    @param {Fun} callback 回调函数
    @param {Number} time 间隔时间
*/
const btnlimit_time = function (callback, time) {
    var startTime
    return function (...arg) {if(!startTime){startTime = new Date().getTime()
            callback.call(this, arg)
        }
        if(new Date().getTime() - startTime > time){startTime = new Date().getTime()
            callback.call(this, arg)
        }
    }
}

应用示例:

<template>
    <button @click="onSubmitTime">{{value}}</button>
</template>
<script>
     export default {data() {
            return {value: 'dom 事件'}
        },
        methods: {onSubmitTime: btnlimit_time(function(e) {   // 此处必须应用 function 不能应用箭头函数
                this.value += '1'
            }, 400)
        }
    }
</script>