防抖和节流

最新推荐文章于 2024-08-17 09:49:36 发布

weixin_30492047

最新推荐文章于 2024-08-17 09:49:36 发布

阅读量61

点赞数

文章标签：面试

原文链接：http://www.cnblogs.com/gqx-html/p/10870458.html

版权

前言

今年3月份阿里面试题其中之一就是防抖与节流，可解决用户体验及改善高频发事件导致浏览器或服务器带来的性能问题。

场景

浏览器条滚动onscroll事件，input输入框input事件，窗口大小改变onresize事件，鼠标移动onmousemove事件等等。

防抖 (debounce)

概念：持续的触发事件，在规定时间内没有再次去触发事件，才会去执行函数，如果在规定事件内又触发了事件，那事件还会继续，直到不在规定事件内触发事件为止

概括：通俗一点的话就是有一个函数1000秒后执行，如果在1000秒之前有其他触发事件，那将会清除掉之前的setTimeout注册的id，再去注册一个新的setTimeout的id去执行

举例：

<html>
  <input type="text" id="debounce" @input="input" />
</html>
<script>
var processor = {
  timeoutId: null,
  performProcessing: function() {
    let that = this;
    console.log("发送模糊查询请求", that.timeoutId);
  },
  process: function() {
    let that = this;
    clearTimeout(that.timeoutId);
    that.timeoutId = setTimeout(function() {
      that.performProcessing();
    }, 1000);
  }
};

document.getElementById('throttle').oninput = function (params) {
   processor.process();
}
<script>

节流 (throttling)

概念：持续的触发事件，在规定事件一定会执行一次函数

概括：通俗一点的话就是一个函数每隔一段时间肯定会执行一次，比如一段时间是1000秒，那就会每隔1000秒执行一次

举例：

1.setTimeout

第一种方法

<template>
  <div id="throttle">
    <div v-for="item in 1000" :key="item">{{ item }}</div>
  </div>
</template>

<script>
var processor = {
  timeoutId: null,
  performProcessing: function() {
    console.log("我被滚动了");
  },
  process: function() {
    let that = this;
    return function(params) {
      if (!that.timeoutId) {
        that.timeoutId = setTimeout(function() {
          that.timeoutId = null;
          that.performProcessing();
        }, 1000);
      }
    };
  }
};
export default {
  mounted() {
    window.onscroll = processor.process();
  }
};
</script>

第二种方法

<template>
  <div id="throttle">
    <div v-for="item in 1000" :key="item">{{ item }}</div>
  </div>
</template>

<script>
export default {
  mounted() {
    var throttle = function(func, delay) {
      var timer = null;
      return function() {
        if (!timer) {
          timer = setTimeout(function() {
            func.apply(this, arguments);
            timer = null;
          }, delay);
        }
      };
    };
    document.onscroll = throttle(function(event) {
      console.log("我被滚动了");
    }, 1000);
  }
};
</script>

2.setInterval

<script>
   let num = 0;
    let time = 1000;
    var t2 = window.setInterval(function() {
      time = time + 1000;
      console.log("numtime4566464", time);
    }, 1000);
</script>

重点

let timeoutId = setTimeout(function() {}, 1000);

setTimeout竟然有返回值，他会返回一个整数，返回值主要是用来表示什么的呢？是为了去注册一个setTimeout的id,这个id是动态的，在同一个触发事件下，id代表的是唯一，是不重复的，这样我们就可以根据id去判断setTimeout到底是哪一个

题外话
如果有能力的小伙伴可以去阿里面试试试哦，当时我面试的时候遇到了一些不会不懂的地方，面试官都会很耐心的提示一些信息，态度也特别的好，同时也可以积累经验，Good luck

转载于:https://www.cnblogs.com/gqx-html/p/10870458.html

weixin_30492047

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖和节流

前言今年3月份阿里面试题其中之一就是防抖与节流，可解决用户体验及改善高频发事件导致浏览器或服务器带来的性能问题。场景浏览器条滚动onscroll事件，input输入框input事件，窗口大小改变onresize事件，鼠标移动onmousemove事件等等。防抖 (debounce)概念：持续的触发事件，在规定时间内没有再次去触发事件，才会去执行函数，如果在规定事件内...
复制链接

扫一扫