Dom性能优化之——函数的防抖节流

我们为什么要用防抖节流？

首先我们要知道防抖节流是用来做什么的。

浏览器中的某些计算和处理要比其他的昂贵得多，当我们试图用dom操作html页面时，如果是进行很多频繁的Dom操作，这很可能导致浏览器挂起，甚至崩溃。在IE中使用 onresize事件时容易发生这种情况，我们有必要控制js的执行次数，这时候我们的节流和防抖就能发挥用处了。

• 节流： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。 例子：电影播放

应用场景：页面的onscroll事件，页面的onscroll事件是一个高频的事件，通过监听页面的scroll事件：

 // 函数节流的实现;
	function throttle(fn, delay) {
	
    var preTime = Date.now();
  
    return function() {
      var context = this,
        args = arguments,
        nowTime = Date.now();
  
      // 如果两次时间间隔超过了指定时间，则执行函数。
      if (nowTime - preTime >= delay) {
        preTime = Date.now();
        return fn.apply(context, args);
      }
      
    };
  }

将节流函数封装成一个文件 在组件中按需引入（防抖如下）

   // 上啦加载
    onLoad() {
      this.loading = false;
      debounce(this.getlist(), 1000);
    },

• 防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 生活实例：电梯的上升过程

应用场景：用户输入表单进行校验并提交

用户在输入表单时，当用户输入第一个字符不进行验证，隔了一段时间，若用户又进行输入，这一次才去进行校验

我们用一个防抖函数来实现这个过程：

// 函数防抖的实现
  export function debounce(fn, wait) {

    var timer = null;

    // var wait = wait || 160

    return function() {
      var context = this,
        args = arguments;
  
      // 如果此时存在定时器的话，则取消之前的定时器重新记时
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
  
      // 设置定时器，使事件间隔指定事件后执行
      timer = setTimeout(() => {
        fn.apply(context, args);
      }, wait);
    };
  }

在指定页面引入函数即可

debounce()，接收两个参数： 第一个参数为要执行的操作（传入的执行函数），第二个参数为间隔时间