js 防抖函数

最新推荐文章于 2026-01-07 11:30:37 发布

原创最新推荐文章于 2026-01-07 11:30:37 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

js 防抖函数，基于变量实现锁定，手动或自动两种方式释放锁

使用场景：适合点击按钮时请求接口，防止并发调用后端接口。
为什么会有定时器自动释放，答：1.可能会忘记释放，2.代码报错影响可能到后面锁的释放
实现方案

(function (){
 //加锁信息
    var lockTable = [];//将锁的信息列表
    /**
    * lockkey 锁的key值
    * second 锁定多少秒自动释放
    * freeCallback 自动释放回调通知函数
    */
    function lock(lockKey,second = 5,$freeCallback = null) {
        if (isNaN(second) || second < 1) {//锁定时间
            return false;
        }
        if (!lockTable instanceof Array) {
            return false;
        }
        var index = -1;
        for(var i = 0; i < lockTable.length; i++) {
            if (lockKey === lockTable[i].key) {
                index = i;
                break;
            }
        }
        if (index === -1) {
            index = lockTable.length;
            lockTable.push({
                key : lockKey,
                timerId : -1
            });
        }
        if (lockTable[index].timerId !== -1) {
            return false;
        }
        lockTable[index].timerId = setTimeout(function (){
            if (typeof $freeCallback === 'function') {
                $freeCallback(lockKey,1);
            }
           lockTable[index].timerId = -1;
           if (typeof $freeCallback === 'function') {
                $freeCallback(lockKey,2);
            }
        }, second * 1000);
        return true;
    }

    /**
    * 解锁函数
    * lockKey 锁的key值
    */
     function unlock(lockKey) {
        if (!lockTable instanceof Array) {
            return false;
        }
        var flag = false;
        for(var i = 0; i < lockTable.length; i++) {
            if (lockKey === lockTable[i].key && lockTable[i].timerId !== -1) {
                clearTimeout(lockTable[i].timerId);
                lockTable[i].timerId = -1;
                flag = true;
                break;
            }
        }
        return flag;
    }
	//对外调用变量
	window.lockTool = {
		lock,
		unlock
	};
})();

使用例子

	if (window.lockTool.lock("request_api")) { //请求前加锁
		$.ajax({
		...,
		success(res) {
			window.lockTool.unlock("request_api");//请求结束手动释放锁
		},
		error(err) {
			window.lockTool.unlock("request_api");//请求结束手动释放锁
		}
		})
	}