[JavaScript知识库]ts防抖节流装饰器

/**
 * 节流  时间内 只执行第一次的函数 第二次生效 必须等时间过去
 * @param time 
 * @returns 
 */
export function throttle(time: number = 0.3) {
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        let oldFun = descriptor.value;
        let isLock = false;
        descriptor.value = function (...args: any[]) {
            if (isLock) { return }
            isLock = true;
            setTimeout(() => {
                isLock = false
            }, time * 1000)
            oldFun.apply(this, args)
        }
        return descriptor
    }
}

/**
 * 防抖  时间内 只执行最后一次的函数 延迟0.3秒执行 再此期间再调用会重新计时
 * @param time 
 * @returns 
 */
export function debounce(time: number = 0.3) {
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        let oldFun = descriptor.value;
        let timeid = null;
        descriptor.value = function (...args: any[]) {
            if (timeid) {
                clearTimeout(timeid);
            }
            timeid = setTimeout(() => {
                oldFun.apply(this, args)
            }, time * 1000)
        }
        return descriptor
    }
}

引入后

    @debounce()
    onClickTest(){
        
    }

?@debounce()

括号内 不填默认是0.3 单位 number类型的 秒数