$ npm i -g npm
$ npm i --save lodash

<input type="text" id="search" placeholder="Search...">

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
  // 假設(shè)這是一個(gè)執(zhí)行搜索操作的函數(shù)
  function performSearch(query) {
    console.log('Searching for:', query);
    // 這里可以發(fā)送 ajax 請(qǐng)求進(jìn)行搜索
  }

  // 使用 lodash 的 debounce 函數(shù)
  const debouncedSearch = _.debounce(function(event) {
    performSearch(event.target.value);
  }, 500);  // 500ms 的防抖時(shí)間

  // 監(jiān)聽輸入框的輸入事件
  document.getElementById('search').addEventListener('input', debouncedSearch);
</script>

<div style="height: 2000px;">Scroll down to see the effect</div>
<!-- 導(dǎo)入 throttle 函數(shù)-->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
    // 這是一個(gè)處理滾動(dòng)事件的函數(shù)
    function handleScroll() {
        console.log('Scroll event detected at:', new Date().toLocaleTimeString());
    }

    // 使用 lodash 的 throttle 函數(shù)，每隔 1 秒最多觸發(fā)一次
    const throttledScroll = _.throttle(handleScroll, 1000);

    // 監(jiān)聽滾動(dòng)事件
    window.addEventListener('scroll', throttledScroll);
</script>

<input type="text" id="input-field" placeholder="Type something...">

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
    // 假設(shè)這是一個(gè)處理輸入的函數(shù)
    function handleInput(value) {
        console.log('Input value processed:', value);
    }

    // 使用 debounce 函數(shù)，并配置 leading 和 trailing 選項(xiàng)
    const debouncedInput = _.debounce(function(event) {
        handleInput(event.target.value);
    }, 1000, { leading: true, trailing: true });

    // 監(jiān)聽輸入框的輸入事件
    document.getElementById('input-field').addEventListener('input', debouncedInput);
</script>

// 防抖函數(shù)
export function debounce(fn: Function, delay: number) {
  let timer: ReturnType<typeof setTimeout> | null = null;

  return function (this: any, ...args: any[]) {
    // 清除上一個(gè)定時(shí)器
    if (timer) {
      clearTimeout(timer);
    }

    // 設(shè)置新的定時(shí)器
    timer = setTimeout(() => {
      fn.apply(this, args); // 使用apply確保this和參數(shù)正確傳遞
    }, delay);
  };
}

  
// 節(jié)流函數(shù)
export function throttle(fn: Function, delay: number) {
  let lastTime = 0;

  return function (this: any, ...args: any[]) {
    const now = Date.now();

    // 如果距離上次執(zhí)行時(shí)間已超過(guò)指定時(shí)間間隔，則執(zhí)行函數(shù)
    if (now - lastTime >= delay) {
      lastTime = now;  // 更新上次執(zhí)行時(shí)間
      fn.apply(this, args);
    }
  };
}

<template>
  <div>
    <input v-model="searchText" placeholder="輸入搜索內(nèi)容" />
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { debounce } from '@/utils/debounce';  // 引入自己寫的防抖函數(shù)

// 1. 聲明響應(yīng)式數(shù)據(jù)
const searchText = ref<string>('');

// 2. 防抖函數(shù)，延遲1000毫秒執(zhí)行提交操作
const submitForm = (val: string) => {
  console.log('提交的搜索值:', val);
  // 在這里執(zhí)行提交操作
};

// 3. 使用防抖函數(shù)包裝提交操作
const handleSubmit = debounce(() => {
  submitForm(searchText.value);  // 使用當(dāng)前輸入的值執(zhí)行提交操作
}, 1000); // 防抖延遲設(shè)置為1000毫秒

</script>

<template>
  <div>
    <input v-model="searchText" placeholder="輸入搜索內(nèi)容" />
    <button @click="submitForm(searchText)">提交</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { debounce } from '@/utils/debounce';  // 引入自己寫的防抖函數(shù)

// 1. 聲明響應(yīng)式數(shù)據(jù)
const searchText = ref<string>('');

// 2. 定義提交表單操作
const submitForm = debounce((val: string) => {
  console.log('提交的搜索值:', val);
  // 在這里執(zhí)行提交操作
}, 1000);  // 防抖延遲設(shè)置為1000毫秒

</script>

<template>
  <div @scroll="handleScroll" style="height: 300px; overflow-y: scroll;">
    <!-- 模擬內(nèi)容，超出容器高度以啟用滾動(dòng) -->
    <div style="height: 1000px;">滾動(dòng)內(nèi)容</div>
  </div>
</template>

<script lang="ts" setup>
import { throttle } from './debounce';  // 引入節(jié)流函數(shù)

// 1. 定義滾動(dòng)事件處理函數(shù)（節(jié)流）
const handleScroll = throttle(() => {
  console.log('滾動(dòng)事件觸發(fā)');
  // 在這里處理滾動(dòng)事件，例如加載更多內(nèi)容
}, 200);  // 每200毫秒只執(zhí)行一次

</script>

<template>
  <div @scroll="handleScroll" style="height: 300px; overflow-y: scroll;">
    <!-- 模擬內(nèi)容，超出容器高度以啟用滾動(dòng) -->
    <div style="height: 1000px;">滾動(dòng)內(nèi)容</div>
  </div>
</template>

<script lang="ts" setup>
import { throttle } from './debounce';  // 引入節(jié)流函數(shù)

// 1. 定義滾動(dòng)事件處理函數(shù)（節(jié)流）
const handleScroll = throttle(() => {
  console.log('滾動(dòng)事件觸發(fā)');
  // 在這里處理滾動(dòng)事件，例如加載更多內(nèi)容
}, 200);  // 每200毫秒只執(zhí)行一次

</script>

npm install --save vue-lodash lodash

yarn add vue-lodash lodash

import Vue from 'vue';
import VueLodash from 'vue-lodash';
import lodash from 'lodash';