lodash防抖和节流

lodash是一个JavaScript工具库，提供了许多常用的函数，包括防抖和节流函数，用于解决一些频繁触发的问题。

防抖函数（debounce）指的是在一定时间间隔内，多次触发同一个函数时，只执行最后一次触发的函数调用。这种方法可以避免在短时间内重复执行同一个函数，常用于用户输入框的输入事件中。

例如，我们要对用户在输入框中输入的文字进行搜索，但是我们不希望每次用户输入都立即触发搜索，而是等待用户停止输入一段时间后再进行搜索。这时我们就可以使用防抖函数来实现：

import debounce from 'lodash/debounce';

const searchInput = document.getElementById('search-input');

function search() {
  // 执行搜索操作
}

const debouncedSearch = debounce(search, 500);

searchInput.addEventListener('input', debouncedSearch);

上面的代码中，debounce函数接收两个参数，第一个参数是要执行的函数，第二个参数是等待时间。在这个例子中，我们将搜索操作作为要执行的函数，设置等待时间为500毫秒。然后将debouncedSearch函数添加到输入框的input事件中，这样每次用户输入时，debouncedSearch函数会被触发，但是实际上只有在用户停止输入500毫秒后，才会执行search函数。

节流函数（throttle）指的是在一定时间间隔内，多次触发同一个函数时，只执行一次函数调用。这种方法可以防止函数重复执行，常用于滚动事件和resize事件等频繁触发的事件中。

例如，我们要监听用户滚动事件，但是我们不希望每次用户滚动都触发函数，而是在一定时间内只触发一次函数。这时我们就可以使用节流函数来实现：

import throttle from 'lodash/throttle';

function onScroll() {
  // 执行滚动操作
}

const throttledScroll = throttle(onScroll, 500);

window.addEventListener('scroll', throttledScroll);

在这个例子中，我们将onScroll函数作为要执行的函数，设置等待时间为500毫秒。然后将throttledScroll函数添加到window的滚动事件中，这样每次用户滚动时，throttledScroll函数会被触发，但是实际上只有在500毫秒内，第一次触发时才会执行onScroll函数，后续触发则会被忽略。