js 实现让一个按钮1分钟点击100次，超过100次不能点击

Question

让一个按钮1分钟点击100次，超过100次不能点击，求大神解答，面试时这样想的

window.onload = function () {
    let btn = document.getElementById("btn");
    for (var i = 1; i <= 100; i++) {
        btn.onclick = (function (j) {
            return function () {
                setTimeout(function () {
                    console.log(j);//每次都是100
                }, 60000 / j);
            }
        })(i);
    }
}

但在setTimeout当中，j的值每次都是100,所以思路是不是有问题，求大佬解疑答惑

Answer 1

var times = 0;
let btn = document.getElementById("btn");
btn.onclick = function() {
    // 执行些乱七八糟的逻辑
    if(times >= 100) {
        return false;
        clearInterval(interval);
    }
    times +=1;
}

var interval = setInterval(function() {
    btn.onclick();
},60000/100);

以下是一个直接在console里面运行的测试函数：

var times = 0;
var interval = setInterval(function() {
    times ++;
    console.log(times);
    if(times == 100) {
        clearInterval(interval);
        return false;
    }
},5000/100);

Answer 2

let clickStart = 0;
let wait = 60000;
let count = 0;
let MaxCount = 100;

btn.addEventListener('click', clickValidateHandle, false)

function clickValidateHandle(e) {
    if (!clickStart) {
        clickStart = new Date()
        count++
        console.log(count)
        return
    }

    if (Date.now() < clickStart + wait && count < MaxCount) {
        count++
        console.log(count)
    } else if (Date.now() > clickStart + wait) {
        clickStart = 0;
        count++
        console.log(count)
    }

    if (count = MaxCount) {
        e.preventDefault();
        console.log(count)
        alert('一分钟内只能点击100次')
    }
}

Answer 3

这个代码只是给按钮绑定了100个点击事件处理函数，并没有实现1分钟内最多100次点击啊？

Answer 4

let btn = document.getElementById("btn");
let check = false;
setTimerout(() => {
    check= true;
}, 60000)
btn.onclick(function() {
    // do something
    btn.setAttribute('disabled', check);
})

Answer 5

ele.onclick = (() => {
    let timeLog = [];
    let LIMIT = 100;
    let TIMELIMIT = 60 * 1000;
    return () => {
        let now = new Date().getTime();
        if(timeLog.length < LIMIT){
            timeLog.push(now);
        }else if(now - timeLog[0] > TIMELIMIT){
            timeLog.shift();
            timeLog.push(now);
        }else{
            return;
        }
        
        // 其他业务逻辑
    };
})();

Answer 6

onclick事件绑定监听是会覆盖的。要用addEventListener。
window.onload = function () {

    let btn = document.getElementById("btn");
    for (var i = 1; i <= 100; i++) {
        btn.addEventListener('click', function (j) {
            return function () {
                setTimeout(function () {
                    console.log(j);//每次都是100
                }, 60000 / j);
            }
        }(i), false)
    }
}

Answer 7

• 写了一个简单的demo，闭包之类的也没必要用，当然用也可以....

<p id="count">0</p>
<button id="btn" onClick="onBtnClick()">点击我</button>
<script>
    var time = 10000 // 1分钟太长，10s比较好测试
    var stopTimes = 10 // 不能点击的次数，10次比较好测试
    var countEle = document.getElementById('count')
    var btnEle = document.getElementById('btn')
    var count = 0, 
        timeout = undefined
    /**
     * 10s内点击10次就会禁用按钮，10s之后才会恢复
     * 10s内点击不超过10次没啥事
     */
    function onBtnClick() {
        if (timeout === undefined) {
            console.log('开始计时')
            timeout = setTimeout(function() {
                clearTimeout(timeout), timeout = undefined, count = 0, btnEle.removeAttribute('disabled')
                console.log('clear', count)
                countEle.innerHTML=count
            }, time);
        }
         ++count === stopTimes ? btnEle.setAttribute('disabled','disabled'): null
        
        console.log('increse', count)
        countEle.innerHTML=count
    }

</script>