js限制按钮每隔一段时间才能再次点击@慕课网原创_慕课网

设置属性 disabled 可以限制交互，单击按钮时添加disabled=“disabled”属性，再为按钮添加定时器，一定时间后删除定时器和disabled属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id='but'> 发送 </button>
14     <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script>
        $(function() {
            $('#but').click(function() {
                $(this).attr("disabled", "disabled");
                var id = 10;
                //定时执行
                var timeing = setInterval(function() {
                    id = id - 1;
                    $('#but').html(id + 's');
                }, 1000);
                //延迟执行
                window.setTimeout(function() {
                    //结束定时,恢复按钮可用
                    clearInterval(timeing);
                    $('#but').html('发送').removeAttr("disabled");
                }, 10000);
            });
        });
    </script>
</body>

</html>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节

或者用DOM

<script>
        var but = document.getElementById('but');
        but.addEventListener('click', function() {
            var id = 10;
            var attr = document.createAttribute("disabled");
            attr.nodeValue = "disabled";
            //设置节点属性
            but.attributes.setNamedItem(attr);
            var timeing = setInterval(function() {
                id = id - 1;
                but.innerHTML = id + 's';
            }, 1000);
            window.setTimeout(function() {
                clearInterval(timeing);
                but.innerHTML = '发送';
                //移除节点属性
                but.attributes.removeNamedItem('disabled');
            }, 10000);
        });
</script>