函数的抖动以及节流

最新推荐文章于 2020-10-12 22:59:07 发布

weixin_30856965

最新推荐文章于 2020-10-12 22:59:07 发布

阅读量138

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/hongll/p/10678656.html

版权

函数防抖和函数节流

　　优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

防抖

在事件被触发delay秒后再执行回调，如果在这n秒内又被触发，则重新计时。--->直白：比如click事件，在规定时间内只能执行一次，若多次点击，只执行最后一次；

    var input = document.getElementsByTagName('input')[0];
    input.onchange = debounce(function(e) {
        console.log(e.value)
      }, 2000)
      //防抖debounce
    function debounce(fn, delay) {
      var timer = null;
      return function() {
        // var _this = this,
        // _arguments = this.args;
        clearTimeout(timer)
        timer = setTimeout(() => {
          fn(this)
        }, delay)
      }
    }

以上代码就是函数防抖，如果直接执行input的onchange事件只要点击回车，就会输出；使用debounce降低了降低回调执行频率。节省计算资源。这样在2000内执行一次，若重复点击，这重新计算；

注意问题：

①timer的作用域，这里使用回调是为了强调timer的作用域；

②this的指向问题，定时器中this的指向是window，所有可以使用箭头函数或者fn.apply(_this,_args)来处理；

节流

每隔一段时间，只执行一次函数。---》直白：比如click事件，在规定时间内，就执行一次，其他的点击都是无效的。

解决方法一：定时器节流。

①：利用一个开关switchT控制点击事件，在用一次性定时器在delay内再恢复

    var input = document.getElementsByTagName('input')[0];
    input.onchange = throttles(function(e) {
        console.log(e.value)
      }, 2000)
      // 节流throttles
    function throttles(fn, delay) {
      var switchT = false;
      return function() {
        if (switchT) return;
        switchT = true;
        setTimeout(() => {
          switchT = false;
        }, delay)
        fn(this)
      }
    }

②：通过时间戳延时

 // 节流throttles 
    function throttles(fn, delay) {
      var timer = null;
      return function() {
        if (timer) return;
        timer = setTimeout(() => {
          fn(this)
          timer = null;
        }, delay)
      }
    }

解决方法二：时间戳节流。使用时间来控制，当前时间与之前的时间间隔超过了delay，就可以再次执行

    var input = document.getElementsByTagName('input')[0];
    input.onchange = throttles(function(e) {
        console.log(e.value)
      }, 2000)
      // 节流throttles
    function throttles(fn, delay) {
      var previous = 0;
      return function() {
        var current = new Date();
        if (current - previous < delay) return;
        fn(this)
        previous = current;
      }
    }