函数节流与函数防抖

概念:

  • 函数节流: 指定时间间隔内只会执行一次任务;
  • 函数防抖: 任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。

区别:

  两者区别在于函数节流是固定时间做某一件事,比如每隔1秒发一次请求。而函数防抖是在频繁触发后,只执行一次(两者的前提都是频繁触发)。

函数节流

  运用场景:函数节流的应用场景一般是onrize,onscroll等这些频繁触发的函数,比如你想获取滚动条的位置,然后执行下一步动作。

  说明:如果监听后执行的是Dom操作,这样的频繁触发执行,可能会影响到浏览器性能,甚至会将浏览器卡死,因此我们想到(可以规定他多少秒执行一次),这种方法叫函数节流(出场啦)。

  处理方式一:

// 限制500ms执行一次
var type = false;
window.onscroll = function(){
    if(type === true) return;
    type = true;
    setTimeout(()=>{
        console.log("要执行的事");
        type = false;
    },500)
}

  处理方式二:

// 限制500ms执行一次
var time = null;
window.onscroll = function(){
    let curTime = newDate();
    if(time==null){
       time = curTime; 
    }
    if((curTime-time)>500){
        console.log("要执行的事");
    }
}

函数防抖

  运用场景:输入框搜索自动补全事件,频繁操作点赞和取消点赞等等。

  说明:频繁操作点赞和取消点赞,因此需要获取最后一次操作结果并发送给服务器。

  处理方式:

var timer = null;
function click(){
    clearTimeout(timer);
    timer = setTimeout(()=>{
        ajax(...);
    },500)
}

  实现说明:如果在500ms内频繁操作点赞或者取消点赞,则每次都会清除一次定时器然后重新创建一个。直到最后一次操作点赞或者取消点赞,然后等待500ms后发送ajax。

 

节流和防抖的结合

  运用场景:如果想要每隔一段时间发送一次请求,而不是等到客户触发最后一次操作才发送请求,可以这样实现。

  处理方式:

var startTime = null;
var timer = null;
function click(){
    let curTime = new Date();
    startTime = startTime == null?curTime:startTime;
    if((curTime - startTime)>1000){
        // 固定上一次操作离这一次操作间隔>1000ms,则发送一次。
        //这里常用于阶段性频繁操作
        startTime = curTime; // 为下一次函数触发做准备
        ajax(...);
    }else{
        // 否则则执行函数防抖
        clearTimeout(timer);
        timer = setTimeout(()=>{
                    ajax(xxx);
                },500);
    }
}

至此结束!!!

 

posted @ 2020-08-06 14:21  季风吹向大海  阅读(152)  评论(0编辑  收藏  举报