JS中的节流和去抖动,js前端性能优化之函数节流和函数防抖

var throttle = fucntion(func,delay){ var timer = null; return funtion(){ var context = this; var args = arguments; if(!timer){ timer = setTimeout(function(){ func.apply(context,args); timer = null; },delay); } }}
时间戳实现:
window.throttle = function(fun,delay){
    var prev = Date.now(); // 闭包维护一个起始时间戳 
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();  // 每次任务函数触发的时候获取时间戳
        if(now-prev>=delay){ // 判断当前时间与起始时间戳的间隔 大余delay则触发任务函数
            fun.apply(context,args);
            prev = Date.now(); // 关键是要更新闭包中的 起始时间戳
        }
    }
}

此时我们再测试

foo = function(){
    console.log('scroll work')
}
dom.addEventListener('scroll', throttle (foo, 1000)); // 当dom连续触发scroll 时 任务函数每隔1秒也会触发一次,当然眼尖朋友会发现有个小瑕疵

1.3.2 闭合浮动

更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。代码如下,看相应的效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix {
            clear: both;
            height: 0;
        }

        .demo1 {
            width: 300px;
            /*height: auto;*/
            border: 5px solid blue;
        }

        .div1 {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
        }

        .demo1::after {
            clear: both;
            content: "";
            display: block;
            height: 0;
        }

        /**/
        .demo2 {
            width: 100px;
            height: 50px;
            background: yellow;
        }
    </style>
</head>
<body>
    <!-- 虽然下面清除了浮动,里面的元素依然不能将demo1的高度撑开 -->
    <div class="demo1">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>

    <!-- 上面清除浮动,下面的排列正常 -->
    <div class="demo2"></div>
</body>
</html>

图片 1

效果图2

时间戳实现:当高频事件触发时,第一次应该会立即执行(给事件绑定函数与真正触发事件的间隔如果大于delay的话),而后再怎么频繁触发事件,也都是会每delay秒才执行一次。而当最后一次事件触发完毕后,事件也不会再被执行了。

总结

防止一个事件频繁触发回调函数的方式:

  • 防抖动debounce:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

  • 节流throttle :使得一定时间内只触发一次函数。
    它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而防抖动只是在最后一次事件后才触发一次函数。
    原理是通过判断是否到达一定时间来触发函数,若没到规定时间则使用计时器延后,而下一次事件则会重新设定计时器。

---end

1.3.1 清除浮动

清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none;代码如下看效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix {
            clear: both;
            height: 0;
        }

        .demo1 {
            width: 300px;
            /*height: auto;*/
            border: 1px solid red;
        }

        .div1 {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background: blue;
            float: right;
        }

        /**/
        .demo2 {
            width: 100px;
            height: 50px;
            background: yellow;
        }
    </style>
</head>
<body>
    <!-- 虽然下面清除了浮动,里面的元素依然不能将demo1的高度撑开 -->
    <div class="demo1">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
    <!-- 清除浮动 -->
    <div class="clearfix"></div>

    <!-- 上面清除浮动,下面的排列正常 -->
    <div class="demo2"></div>
</body>
</html>

图片 2

效果图1

时间: 2018-12-22阅读: 420标签: 优化前言:针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能节流:

定时器实现:
var throttle = function(fun,delay){
    var timer = null; // 维护一个定时器
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){ // 当任务函数触发了 , 判断定时器是否存在  不存在才执行任务函数
            timer = setTimeout(function(){ 
                fun.apply(context,args);
                timer = null;
            },delay);  // 当定时器不存在的时候 delay秒后才执行任务函数 并且清空定时器 接着下个轮回
        }
    }
}

当第一次触发事件时,肯定不会立即执行函数,而是在delay秒后才执行。
之后连续不断触发事件,也会每delay秒执行一次。
当最后一次停止触发后,由于定时器的delay延迟,可能还会执行一次函数。

可以综合使用时间戳与定时器,完成一个事件触发时立即执行,触发完毕还能执行一次的节流函数:

window.throttle = function(fun,delay){
    var timer = null;
    var startTime = Date.now();  

    return function(){
        var curTime = Date.now();
        var remaining = delay-(curTime-startTime);  // 计算出两次触发的时间间隔有没有大余delay 
        var context = this;
        var args = arguments;

        clearTimeout(timer);
        if(remaining<=0){ 
            func.apply(context,args);
            startTime = Date.now();  // 如果两次触发时间大余delay,则立马触发一次任务函数并且更新起始时间戳
        }else{
            timer = setTimeout(fun,remaining);  // 如果两次触发时间小于delay, 则改变定时器时间保证delay时间一定触发任务函数
        }
    }
}

1.2.1 防抖动

function debounce(fn, delay) {
  let timer = null;
  let context = this;
  let args = arguments;

  clearTimeout(timer);
  timer = setTimeout(function() {
    fn.apply(context, args);
  }, delay);
}

// 当用户滚动时被调用的函数
function foo() {
  console.log("You are scrolling");
}

let elem = document.getElementById("container");
elem.addEventListener("click", debounce(f00, 2000));
  • 首先我们为click事件绑定处理函数debounce,当点击时会立即调用,因此click事件触发的是foo函数
  • 每一次事件被触发,都会清除当前的timer然后重新设置超时调用。这就会导致每一次高频事件都会取消前一次的超时调用,导致事件处理程序不能被触发。
  • 只有当高频事件停止时,最后一次事件触发的超时调用才能在delay时间后执行。
// 将会包装事件的 debounce 函数function debounce(fn, delay) { // 维护一个 timer let timer = null; return function() { // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量 let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }}

Debounce

为什么要去抖动?

我们知道 浏览器有一些原生事件,比如 resize scroll keyup keydown 这些事件的回调函数,当他们触发的时候,并不是想象中的只触发一次,而是几次甚至几十次,如果当你的这些事件回调函数中有一些复杂的运算或者dom操作,低配浏览器很容易出现假死的状态。

去抖动Debounce实现的效果是:以scroll来举例,当scroll回调在指定的时间n毫秒内还会触发,此次回调方法不执行,继续等待n毫秒,直到n毫秒之后此方法不再触发,执行这个方法。简单来说就是:把在指定时间内可能会多次执行的方法打包成一次

window.debounce = function(fun,dely){  //fun 需要去抖动的方法,dely 指定的延迟时间
    var timer = null;  // 用闭包维护一个timer 做为定时器标识
    return function(){
        var context = this;  // 调用debounce的时候 保存执行上下文
        var args = arguments;  
        clearTimeout(timer);
        timer = setTimeout(function() {
            fun.apply(context , args);
         }, delay); // 设定定时器 判断是否已经触发 ,如果触发则重新计时 等待dely毫秒再执行
    }
}

此时如果调用

foo = function(){
    console.log('scroll work')
}
dom.addEventListener('scroll', debounce(foo, 2000)); // 当dom连续触发scroll 时 回调函数只会在两秒后执行一次 

但是这种写法有一个明显的缺陷,就是当用户触发的第一时间方法是不会调用,所以上升级版

window.debounce = function(fun,dely){ 
    var timer = null; 
    return function(){
        var context = this;  
        var args = arguments;  
        if(timer) { clearTimeout(timer) }; // 看似多余的 但是是必须的 读者可以自己思考为什么需要这么处理
        var doNow = !timer; // 判断是否有定时器,如果有,就dely后清除timer,否则立即执行;
        timer = setTimeou(function(){
            timer = null ;
        },dely)
        if(doNow){
            fun.apply(context, args);
        }
    }
}

现在的效果是,你滚动的第一时间会触发回调,然后你要是连续再触发,在dely秒之内是不会触发的,只有等dely毫秒后 timer 清除了,再触发滚动才会调用回调。

想必两个版本的问题大家都看出来了,多多少少都是有点奇怪。接下来就是节流登场了

1.3.3 总结

通过以上实例发现,其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,虽然设置了新标签来清除浮动但并不能解决wrap高度塌陷的问题。

用闭合浮动比清除浮动更加严谨,因此称之为:“闭合浮动”会更加严谨。

时间戳定时器

首先要明白 节流 Throttle 和 去抖动 Debounce 两者是有区别的,很多人一开始都会搞混。
先讲讲去抖动 Debounce

1.4.1这是什么原因?

图片 3

1.4.1

从图中可以看到,baseline和bottom之间有一定的距离。实际上,inline的图片下面空白正是baseline和bottom之间的这段距离。即使只有图片没有文字,只要是inline的图片这段空白都会存在。
因此,想要去掉这段空白,最直接的方法是将图片的vertical-align设置为其他的值。或者咱们知道top和bottom直接的距离就是line-height的高度,当你设置外层div的行高为0时,也就意味这baseline和bottom之间的距离为0,那么空白也就会消失了。因此代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img三像素问题</title>
    <style>
        div {
            /*解决方案一:在div上增加line-height:0*/
            /*line-height: 0;*/
        }

        img {
            /*解决方案二: 设置img的vertical-align为其他值*/
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div><img src="1.png" alt="图片 4"></div>
</body>
</html>
var throttle = function(func,delay){ var prev = Date.now(); return function(){ var context = this; var args = arguments; var now = Date.now(); if(now-prev=delay){ func.apply(context,args); prev = Date.now(); } }}

Throttle

节流函数是处理类似场景但抖动不适合的另一种解决方案,比如大型电商网站当用户滚动到页面底部的时候再发AJAX请求获取图片,实现图片懒加载,如果使用去抖动,不管方案一还是二,都会用种奇怪的体验,假设设置500ms的delay时间,使用方案一,效果则是,用户滚动了,500ms后发AJAX获取图片,再显示图片。期间500ms用户是只能看到图片缺失的。如果使用方案二,似乎是能实现需求,但是仔细想想,如果用户不是500ms滚动一次,而是玩命的在连续滚动,则AJAX只会触发一次,用户只能看到第一次滚动触发AJAX返回的图片,后面的则是图片缺失状态。

到这应该可以猜到节流实现的什么效果了。

节流函数允许一个函数在规定的时间内只执行一次。

它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。

主要有两种实现方法:

1.时间戳
2.定时器

停更了基本上半年的时间了,今天继续写这个面试的内容吧。
今天从几份我收藏的面试题开始说起把,如果这些面试题搞懂了,我感觉去参加BAT的面试还是可以搏一搏的。

节流:使得一定时间内只触发一次函数。它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而防抖动只是在最后一次事件后才触发一次函数。原理是通过判断是否到达一定时间来触发函数,若没到规定时间则使用计时器延后,而下一次事件则会重新设定计时器

1.1 有一个长度未知的数组a,如果它的长度为0就把数字1添加到数组里面,否则按照先进先出的队列规则让第一个元素出列。(代码量小于30个字)。

这个网上给出了明确的答案。这是对数组的队列方法和栈方法,此题使用三元运算符比较好。
答案: a.length === 0 ? a.push(1): a.shift();

防抖动:

1.4 img 3像素或者4像素的问题?

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img三像素问题</title>
    <style>
        img {
            /*vertical-align: top;*/
        }
    </style>
</head>
<body>
    <div><img src="1.png" alt="图片 5"></div>
</body>
</html>

执行结果如下:

图片 6

执行效果

定时器实现:当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行;直到delay秒后,定时器执行执行函数,清空定时器,这样就可以设置下个定时器。

1.2.2 节流

节流是另一种处理类似问题的解决方法。节流函数允许在一个函数在规定的时间内只执行一次。它和防抖动最大的区别是,节流函数不管事件触发的有多频繁,都会保证在规定时间内一定会执行一次真正的处理函数。
比如: 在页面的无限加载的场景下,我们需要用户滚动页面时,每隔一段时间发一次Ajax请求,而不是在用户停下滚动页面操作时采取请求数据。这样的场景,就适合用节流阀技术来实现。
实现方式有两种: 时间戳、定时器

  • 时间戳的实现:
var throttle = function(func, delay) {
  var prev = Date.now();
  return function() {
    var context = this;
    var args = arguments;
    var now = Date.now();
    if(now->prev == delay) {
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

当高频事件触发时,第一次应该会立即执行,而后再怎么高频触发事件,也都是每delay秒才会执行一次。而当最后一次事件触发完毕后,事件也不会再被执行了。

  • 定时器实现:
    当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行了,直到delay后,定时器执行处理函数,清空定时器,这样就可以设置下一个定时器。
var throttle = functon(func, delay) {
  var timer = null;
  return function() {
    var context = this;
    var args = arguments;

    if(!timer) {
      timer = setTimeout(function() {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}
var throttle = function(func,delay){ var timer = null; var startTime = Date.now(); return function(){ var curTime = Date.now(); var remaining = delay-(curTime-startTime); var context = this; var args = arguments; clearTimeout(timer); if(remaining=0){ func.apply(context,args); startTime = Date.now(); }else{ timer = setTimeout(func,remaining); } }}

1.3.3 为什么要闭合浮动?

其实这个问题很简单,是因为浮动会给你的布局带来影响,否则闭合浮动干什么!!!不过还得需要认识两个概念,普通流和浮动。
1)普通流:很多人或者文章称之为文档流或者普通文档流,其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ,但标准里只有另一个词,叫做 普通流或者称之为常规流。但似乎大家更习惯文档流的称呼,因为很多中文翻译的书就是这么来的。比如《CSS Mastery》,英文原书中至始至终都只有普通流 normal flow(普通流) 这一词,从来没出现过document flow (文档流)

2)浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。

正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。

主要有两种实现方法:

1.3.4 最后就是怎么闭合浮动和原理?

这个问题之前咱们都已经谈论过怎么闭合浮动了,至于原理需要移步对BFC的了解。希望同学们可以自己去查询。

当第一次触发事件时,肯定不会立即执行函数,而是在delay秒后才执行。之后连续不断触发事件,也会每delay秒执行一次。当最后一次停止触发后,由于定时器的delay延迟,可能还会执行一次函数。

1.2.3 总结

其实上面的方式都可以进行调整,看自己的思路了。防止一个事件频繁触发回调函数的方式:

  • 防抖动
  • 节流

趁着一点时间更新几道题目

防抖动:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发

1.3 浮动为什么会造成高度塌陷?如何解决?

这个问题其实很多面试题都会在问,其实就是这个知识点,没有太多的东西。好的,现在咱们先高清一些概念吧。

综合使用时间戳与定时器,完成一个事件触发时立即执行,触发完毕还能执行一次的节流函数:

1.2 防抖动与节流

针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,很可能在很短的时间内多次连续触发事件,非常影响性能。
因此针对此类事件要进行防抖动或者节流处理。

它的做法就是限制下次函数调用之前必须等待的时间间隔。正确实现debouncing的方法是将若干个函数调用合成一次,并在给定事件过去之后仅被调用一次。

  1. 首先,我们为scroll事件绑定处理函数,这时debounce函数会立即调用, 因此给scroll事件绑定的函数实际上是debounce内部返回的函数

  2. 每一次事件被触发,都会清除当前的 timer 然后重新设置超时调用。 这就会导致每一次高频事件都会取消前一次的超时调用,导致事件处理程序不能被触发

  3. 只有当高频事件停止,最后一次事件触发的超时调用才能在delay时间后执行

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:JS中的节流和去抖动,js前端性能优化之函数节流和函数防抖

相关阅读