js多次点击的响应

编辑 / blog / 发布于2020-10-09 / 更新于2023-03-16 / 阅读 241
  • js中只内置了单击和双击的相应,而且这两者之间还有冲突,使用起来不太方便。
  • 下列代码可以完成任意次点击的相应,且无冲突,原理是使用了一个定时器,在一定时间内完成多少次点击便执行多少次点击相应的任务。这个时间可以由自己选择。
    <div><button id="button_id"/>
    <script type="text/javascript">
        $(document).ready(function(){        

            var timer = null;
            var cnt =0;

            $("#button_id").click(function(){
                cnt++;
                console.log(cnt);
                timer = setTimeout(function(){
                    switch (cnt) {
                        case 1:
                            console.log("click once");        
                            break;
                        case 2:
                            console.log("click 2");        
                            break;
                        case 3:
                            console.log("click 3");        
                            break;
                        
                        default:    
                            break;
                    } 
                    clearTimeout(timer);         
                    cnt =0;                         
              }, 300);});
        });
        </script>
        </div>