前端面试锦笈

JavaScript系列--防抖动

2018-05-01  本文已影响0人  小鱼儿的小世界

网摘:https://www.cnblogs.com/fengzikuange/p/6150258.html
https://www.cnblogs.com/Unknw/p/6689137.html
https://blog.csdn.net/caopengflying/article/details/79120589

防抖动,其核心内涵在于延迟处理

点击发送验证码之后,摁扭变成不可点击状态,
并且显示60秒动态倒计时,当time == 0时,摁扭重新变成可点击状态
html代码:<button id="btn">发送验证码</button>
js代码:

    let wait = 10;
    let btn = document.getElementById("btn");
    btn.onclick = function(){
        // time(this);
        var timer = setInterval(function(){
            if(wait == 0){
                btn.removeAttribute("disabled",false);
                btn.innerHTML = "重新发送验证码";
                clearInterval(timer);
            }else{
                btn.setAttribute("disabled",true);
                btn.innerHTML = wait + "s";
                wait--;
            }
        },1000);
    };
    /*
    function time(o){
        if(wait == 0){
            o.removeAttribute("disabled",false);
            o.innerHTML = "重新发送验证码";
            wait = 60;
        }else{
            o.setAttribute("disabled",true);
            o.innerHTML = wait + "s";
            wait--;
            setTimeout(function(){
                time(o);
            },1000);
        }
    }*/

感谢阅读我的文章,如有疑问或写错的地方,请不吝留言赐教

上一篇下一篇

猜你喜欢

热点阅读