如何实现防抖和节流

防抖和节流是前端开发中常用的两种性能优化技术。

防抖的原理是在事件被触发n秒后再执行回调函数，如果在这n秒内又触发了该事件，则重新计时。通俗的说，就是在规定时间内，如果事件被多次触发，则只执行最后一次触发的事件。适用于如搜索框输入联想、无限滚动等场景。

实现防抖的代码如下：

function debounce(fn, wait) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, wait);
  };
}

节流的原理是在一定时间内只触发一次事件，即每隔一段时间执行一次事件。适用于如页面滚动、按钮点击等场景。

实现节流的代码如下：

function throttle(fn, wait) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };
}

以上两个函数都是闭包函数，使用时可以直接调用函数并传入需要执行的回调函数和等待时间。

相关问题

js如何实现防抖和节流

JS实现防抖和节流的方法如下：
1. 防抖：在一定时间内，只执行最后一次触发事件的回调函数。实现方法是使用setTimeout函数，在事件触发后设定一个定时器，如果在定时器时间内再次触发事件，则清除之前的定时器并重新设定一个新的定时器。如果在定时器时间内没有再次触发事件，则执行回调函数。
2. 节流：在一定时间内，只执行一次触发事件的回调函数。实现方法是使用时间戳，在事件触发时记录当前时间戳，如果当前时间戳与上一次触发事件的时间戳的差值大于等于设定的时间间隔，则执行回调函数并更新上一次触发事件的时间戳。

具体实现代码如下：
1. 防抖：

function debounce(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  }
}

2. 节流：

function throttle(func, delay) {
  let lastTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const nowTime = Date.now();
    if (nowTime - lastTime >= delay) {
      func.apply(context, args);
      lastTime = nowTime;
    }
  }
}

vue2实现防抖和节流

在Vue2中实现防抖和节流可以使用Vue的指令和方法来实现。

## 防抖

防抖的实现方法是在一定时间内只执行一次方法，如果在这段时间内又有触发事件的操作，那么计时器就会被重新计时，直到时间结束才会执行方法。

### 指令实现

在Vue2中可以使用v-debounce指令来实现防抖：

<template>
  <button v-debounce:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked');
    }
  }
}
</script>

可以看到v-debounce指令绑定在click事件上，这样就会在点击按钮时执行handleClick方法，但是在执行handleClick方法之前会先执行防抖函数。

下面是v-debounce指令的实现：

Vue.directive('debounce', {
  inserted: function (el, binding) {
    let timer;
    el.addEventListener('click', () => {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value();
      }, 500)
    })
  }
})

上面的代码实现了一个叫做debounce的指令，它会在元素插入到DOM中时绑定一个click事件，在click事件中执行防抖函数，最后执行传入的回调函数。

### 方法实现

除了指令，我们也可以在Vue2的方法中实现防抖。

<template>
  <button @click="debounceClick">Click me</button>
</template>

<script>
export default {
  methods: {
    debounce(fn, delay) {
      let timer;
      return function () {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay)
      }
    },
    handleClick() {
      console.log('Clicked');
    },
    debounceClick: debounce(this.handleClick, 500)
  }
}
</script>

上面的代码中我们在Vue2的methods中实现了一个debounce方法，它返回一个函数，这个函数会在delay时间内执行一次fn方法。我们在handleClick方法前面加上了debounce，这样每次点击按钮时就会执行debounceClick方法，而不是直接执行handleClick方法。

## 节流

节流的实现方法是在一段时间内只执行一次方法，如果在这段时间内有多次触发事件的操作，那么只有第一次触发事件的操作会执行方法，其余的操作会被忽略，直到时间结束才会重新计时。

### 指令实现

在Vue2中可以使用v-throttle指令来实现节流：

<template>
  <button v-throttle:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked');
    }
  }
}
</script>

可以看到v-throttle指令绑定在click事件上，这样就会在点击按钮时执行handleClick方法，但是在执行handleClick方法之前会先执行节流函数。

下面是v-throttle指令的实现：

Vue.directive('throttle', {
  inserted: function (el, binding) {
    let timer;
    el.addEventListener('click', () => {
      if (!timer) {
        timer = setTimeout(() => {
          timer = null;
          binding.value();
        }, 500)
      }
    })
  }
})

上面的代码实现了一个叫做throttle的指令，它会在元素插入到DOM中时绑定一个click事件，在click事件中执行节流函数，最后执行传入的回调函数。

### 方法实现

除了指令，我们也可以在Vue2的方法中实现节流。

<template>
  <button @click="throttleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    throttle(fn, delay) {
      let timer;
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            timer = null;
            fn.apply(this, arguments);
          }, delay)
        }
      }
    },
    handleClick() {
      console.log('Clicked');
    },
    throttleClick: throttle(this.handleClick, 500)
  }
}
</script>

上面的代码中我们在Vue2的methods中实现了一个throttle方法，它返回一个函数，这个函数会在delay时间内执行一次fn方法。我们在handleClick方法前面加上了throttle，这样每次点击按钮时就会执行throttleClick方法，而不是直接执行handleClick方法。