防抖和节流

时间 2019-11-06

标签节流繁體版

原文原文链接

1.应用场景：

~~js的一些事件：如keyup、onresize、scroll、mousemove、mousehover等；还有相似于：手抖、手滑、手误、服务器没有响应或者响应慢等的重复点击操做。~~html

(2019-03-21)优化成下面：前端

防抖：
- search搜索联想，用户在不断输入值时，用防抖来节约请求资源；
- window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次；
- 防止重复提交；
节流：
- 鼠标不断点击触发，mousedown（单位时间内只触发一次）；
- 监听滚动事件，好比是否滑到底部加载更多，用throttle来判断。
再增长一点：防抖和节流的做用
- 为了减小没必要要的计算；
- 不浪费资源；
- 只在适合的时候进行计算。

2.共同点：

~~均是用来控制某个函数在必定时间内执行多少次的技巧。两种方法都是用来提升前端性能，减轻浏览器压力。~~面试

(2019-03-21)优化成下面：算法

防止某一时间频繁触发事件。浏览器

3.区别：

3.1 什么是防抖(debounce)？

延时处理，在事件被触发N秒后再执行回调，若是在这N秒内又被触发，则从新开始计时。服务器

(2019-03-21)增长下面：app

某一时间段内，只能触发一次，周期内不能再次触发，直到中止后，才能够执行。

window.addEventListener('resize',function(e){
    var t;
    return function(){
        if(t) clearTimeout(t);
        t = setTimeout(function(){
            // do something...
        },500);
    }
}());

3.2 什么是节流(throttle)？

让一个函数没法在很短期内连续调用，当上一次函数过了规定的这个时间段后，才能进行下一次该函数的调用。异步

(2019-03-21)增长下面：前端性能

每隔一个周期，执行一次

function throttle(func, waitTime) {
    var timeout,
        previous = 0;
    return function() {
        context = this;
        args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, waitTime)
        }
    }
}

(2019-03-21)防抖和节流实现函数增长下面：函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>防抖与节流</title>
<style>
  #container {
      width:400px;
      height: 200px;
      line-height: 200px;
      text-align: center;
      color: #ffffff;
      background-color: #333;
      font-size: 30px;
  }
</style>
</head>
<body>
   <div id="container"></div>
</body>
<script>
    //防抖和节流的做用： 为了减小没必要要的计算，不浪费资源，只在适合的时候进行计算
    // var count = 1;
    // var container = document.getElementById('container');
    // function getUserAction(){
    //     //大量的算法、逻辑、异步、回调
    //     console.log(this);
    //     container.innerHTML = count++;
    // }
    // container.onmousemove = debounce(getUserAction,1000,true);

    // //防抖
    // function debounce(func,wait,flag){
    //     var timeout;
    //     var self = this;
    //     return function(){
    //         clearTimeout(timeout);
    //         if(flag){//开始边界  就去就是作
    //             var callnow = !timeout;//callnow:当前状态  
    //             timeout = setTimeout(function(){
    //                 timeout=null;
    //             },wait);
    //             if(callnow){
    //                 func.apply(self);
    //             }
    //         }else{
    //             timeout = setTimeout(function(){
    //                 func.apply(self);//为啥this没有表明 <div id="container"></div>？
    //             },wait);
    //         }
    //     }
    // }
    //能够控制边界
    // 开始边界  与  结束边界

    // 事件执行一个方法，返回一个方法


    //节流
    var count = 1;
    var container = document.getElementById('container');
    function getUserAction(){
        //大量的算法、逻辑、异步、回调
        container.innerHTML = count++;
    }
    container.onmousemove = throttle(getUserAction,5000);

    function throttle(func,wait){
        //用定时器或者时间戳都可以写
        var prexious = 0;//用作标记
        return function(){
            var self = this;
            var now = +new Date();//+new Date() 返回13位的时间戳，毫秒数；将会调用Date原型上的valueOf方法，等同于Date原型上的getTime()方法
            if(now - prexious > wait){
                func.apply(self);
                prexious = now;
            }
        }
    }



</script>
</html>

4.文字举例：

A同窗从B地到C地，防抖就至关于A同窗坐公交车（乘客源源不断的刷卡上车，直到司机看见无人刷卡后，才会发车，即一段时间内，回调函数只会调用一次，即触发事件的最后一次）；节流就至关于A同窗坐地铁（在规定的停车，在规定的时间发车，即在一段时间内，会每隔一段时间调用一次）。

(2019-03-21)总感受这段文字解释不太好理解，先划掉吧~

5.结语：

据说这是个高频面试题，且先记下。