Your Browser Don't Support Canvas, Please Download Chrome ^_^``

简单节流防抖函数实现

字数: 123123   阅读数: 0
Posted by Kerwin She on April 19, 2018

概念解释

函数节流: 频繁触发,但只在特定的时间内才执行一次代码

函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

函数节流

函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到。因为滚动事件,是一个高频触发的事件。

以下是监听页面元素滚动的示例代码:

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲,如果在执行中,则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

函数防抖

 函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语。以下还是以页面元素滚动监听的例子,来进行解析:

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
   clearTimeout(timer); // 清除未执行的代码,重置回初始化状态

   timer = setTimeout(function(){
       console.log("函数防抖");
   }, 300);
};