用js封装一个节流函数

好的，以下是一个用 JavaScript 封装的节流函数：

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

这个函数接受两个参数：需要节流的函数和节流的时间间隔。它会返回一个新的函数，这个函数会在每个时间间隔内只执行一次传入的函数。

相关问题

js防抖和节流函数封装

防抖和节流是两种常用的函数优化技术，可以用来限制函数的执行频率，提高性能和用户体验。

防抖函数的作用是在短时间内连续触发同一事件时，只执行最后一次操作，而忽略之前的操作。可以用于处理频繁触发的事件，比如窗口大小改变、输入框输入等。

下面是一个简单的防抖函数封装示例：

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

使用方式示例：

function handleInput() {
  // 处理输入事件
}

const debouncedHandleInput = debounce(handleInput, 300); // 创建防抖函数

inputElement.addEventListener('input', debouncedHandleInput); // 绑定防抖函数到输入框的输入事件

节流函数的作用是在一定时间间隔内只执行一次操作，可以用于处理高频率触发的事件，比如滚动事件、鼠标移动事件等。

下面是一个简单的节流函数封装示例：

function throttle(func, delay) {
  let timer = null;
  return function(...args) {
    if (timer) return;
    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, delay);
  };
}

使用方式示例：

function handleScroll() {
  // 处理滚动事件
}

const throttledHandleScroll = throttle(handleScroll, 300); // 创建节流函数

window.addEventListener('scroll', throttledHandleScroll); // 绑定节流函数到窗口的滚动事件

以上是基本的防抖和节流函数封装示例，可以根据实际需求进行调整和扩展。希望能对你有所帮助！

uniapp 封装的防抖节流函数

以下是一个基于 Uniapp 框架封装的防抖节流函数：

export function debounce(fn, delay = 500) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

export function throttle(fn, interval = 500) {
  let timer = null;
  let last = 0;
  return function(...args) {
    let now = +new Date();
    if (now - last < interval) {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        last = now;
        fn.apply(this, args);
      }, interval);
    } else {
      last = now;
      fn.apply(this, args);
    }
  };
}

使用方式如下：

import { debounce, throttle } from '@/utils/debounce-throttle';

// 防抖
const debouncedFn = debounce(() => {
  // 函数体
}, 1000);

// 节流
const throttledFn = throttle(() => {
  // 函数体
}, 1000);

其中，`debounce` 函数用于防抖操作，即在指定时间内，只执行最后一次触发的函数；而 `throttle` 函数用于节流操作，即在指定时间内，每隔一段时间执行一次触发的函数。可以根据实际需求选择不同的函数进行使用。