防抖和节流

防抖

防抖的含义就是让某个时间期限内，事件处理函数只执行一次。

        // 防抖
        var top = document.querySelectorAll(".tpo");

        var t;
        top.addEventListener('click', function () {
            clearInterval(t);
            t = setInterval(function () {
                document.documentElement.scrollTop -= 20;
                if (document.documentElement.scrollTop == 0) {
                    clearInterval(t);
                }
            }, 30)
        })

 

 

节流

在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

        // 节流
        var btn = document.querySelector(".btn");
        var t;
        btn.addEventListener('click', function () {
            this.disabled = "none";
            var count = 60;
            t = setInterval(function () {
                count--;
                btn.innerHTML = count + "秒后重新发送";
                if(count<=0){
                    btn.disabled = "";
                    btn.innerHTML = "发送验证码";
                    count = 60;
                    clearInterval(t);
                }
            }, 1000)
        })