前端问题整理

前端问题整理

1、防抖(Debounce)与节流(Throttle)

防抖与节流都是一种控制函数在一定时间内执行次数的技巧

防抖：在函数被触发n秒后再执行，如果在n秒内又有函数执行，则重新计算。

实例：在我们做搜索框搜索的时候我们需要根据用户的输入内容进行搜索，为了防止用户输一个字符我们就去发送一次请求，造成资源浪费，这个时候我们就需要使用防抖来节制请求的次数，用户输入内容后1秒我们再去发送请求，如果在一秒内用户重新输入了其他内容那我们需要清掉定时器重新定义定时器然后发送请求

范例代码：

function debounce(fun, delay) {
  let timer = null
  return function(...args) {
    if (timer) clearTimeout(timer);
    let context = this
    timer = setTimeout(function() {
      // 执行传入的函数，需要绑定this
      fun.apply(context, args)
    }, delay)
  }
}
debounce(dosomething, 1000)

节流：允许一个函数在 X 毫秒内只执行一次。

实例：1、在实际开发中我们在提交表单的时候如果多次点击提交按钮的话会多次发送提交请求，造成资源浪费，这个时候需要使用节流控制按钮在一定时间内只需要发送一次请求即可；

​ 2、在移动端里面下拉加载的时候，下拉一次发送一次请求，第一次下拉发送的请求还没有回应如果再次下拉会继续发送请求，这样会造成未知的问题，这个时候应该使用节流对下拉发送请求作出限制。

范例代码：

function throttle(fn, delay) {
    var last = 0;
    return function() {
        // this和argument
        var _this = this;
        var _arguments = arguments;

        var now = new Date().getTime();
        if (now - last > delay) {
            fn.apply(_this, _arguments);
            last = now;
        }
    }
}
throttle(dosomething, 1000)