js 控制按钮在倒计时时间内不可操作

html中layui

<div class="layui-inline">
        <a class="layui-btn layui-btn-normal searchBtn layui-bg-green" id="searchBtn">搜索</a>
</div>

js操作

  // (function () {
        var flag = true;
        var count = 20;
        var timer;
		$('#searchBtn').on('click', function () {
            if (count == 0) {
                flag = true;
            }
            if (flag == true) {
                popUpConfirm();
            } else {   //已经点击         
                hasClicked();
            }
        })
        //)();

弹出提示框

flag判断按钮是否可用；
count：是初始化禁用时间；
timer是计时器

		function popUpConfirm() {
            layer.confirm('因数据量比较大，查询时请耐心等待，不要重复点击', {
                btn: ['确定', '取消'] //按钮
            }, function (popIndex) {
                flag = false;
                count = 20;
                if (timer == undefined) {
                    timer = setInterval(function () {
                        if (count > 0) {
                            count--;
                            // console.log(timer, flag, count);
                        } else {
                            flag = true;
                            clearInterval(timer);
                            timer = null;
                        }
                    }, 1000);
                }
                tavlelsReload(1, popIndex);
            });
        }

当按钮禁用时，对用户进行提示

		function hasClicked() {
            if (count == 20) {
                layer.confirm('您点击过快，请在' + count + '秒后再次尝试查询', {
                    btn: ['确定'] //按钮
                })
            } else {
                if (count < 0) {
                    flag = true;
                    count = 20;
                    clearInterval(timer);
                    timer = null;
                } else {
                    layer.confirm('您点击过快，请在' + count + '秒后再次尝试查询', {
                        btn: ['确定'] //按钮
                    })
                }
            }
        }