JS- 事件监听之防止点击过快

HTML+css

move.js

<!-- 在body中,调用外部js文件,只要写在调用函数之前就可以 -->
<script src="./move.js"></script>

<script>
    // 阻止点击过快的思路
    // 方法1:禁用
    //   点击时,禁用button
    //   这样的方法,只对button按钮有用
    //   div,span等标签是没有作用的

    // 方法2:判断+return
    //   第一次点击执行 move()函数
    //   之后再点击,执行的是return,终止执行move()函数
    //   当运动终止之后,可以再次点击

    var oDiv = document.querySelector('div');
    var oBtn = document.querySelector('button');


    /*
        // 方法1,禁用方法
    
    
    oBtn.addEventListener('click' , function(){
        // 点击时,给button按钮添加引用属性
        // 当运动停止时,也就是旧的定时器已经清除了
        // 可以再次执行了
        // 参数3,是运动停止后,也就是清除了定时器之后,执行的程序
        //       在参数3的函数中,让 button按钮 , disabled 为 false 
        oBtn.disabled = true;
        // 代用move函数
        move(oDiv , {left:600} , function(){
            oBtn.disabled = false;
            console.log('运动停止了');
        })
    })

    */

    // 定义一个变量,类似于质数判断中的开关变量
    // 赋值原始值
    var bool = true;

    oBtn.addEventListener('click' , function(){
        // 方法1  变量是 原始值true,执行程序
        // if(bool === true){   
        //     // 就执行move()
        //     move(oDiv,{left:600},function(){
        //         // 当运行结束时,给bool,在赋值为true,可以再次点击
        //         bool = true;
        //     });
        //     // 写哪儿无所谓,只要是执行,就给变量赋值其他数值
        //     bool = '其他数值';
        // }


        // 方式2  变量不是原始值true, 执行return,终止之后的函数程序执行
        if(bool !== true){
            // 如果变量中不是原始值,就直接执行return,不再执行之后的程序
            return;
        }
        move(oDiv,{left:600},function(){
            // 当运行结束时,给bool,在赋值为true,可以再次点击
            bool = true;
        });
        bool = '随便写什么';
    })