本文共 824 字，大约阅读时间需要 2 分钟。

1. 防抖函数

概念：频繁触发，但只在规定时间内没有触发查询条件才会执行一次代码。

实现原理：如果在delay时间内频繁操作，则每次都会清除一个定时器并重新创建一个，直到最后一次操作，等待delay时间后执行fn函数。 应用场景：频繁操作点赞和取消点赞；输入框搜索自动补全事件；scroll滚动触发事件，判断是否到页面底部自动加载更多；表单校验；按钮提交；浏览器窗口缩放，resize事件； 优点：有效减轻服务器的压力； 代码实现：

const debounce = (fn, delay) => {  let timer = null  return (...args) => {    clearTimeout(timer)    timer = setTimeout(() => {      fn.apply(this, args)    }, delay)  }}

2. 节流函数

概念：频繁触发，但在指定时间内只执行一次代码

实现原理：如果频繁操作，每次都会判断当前是否有函数在执行，如果没有，则会在delay时间后执行函数。 应用场景：拖拽mousemove事件；输入框搜索自动补齐；scroll滚动触发事件，判断是否到页面底部自动加载更多，给scroll加debounce，只有用户停止滚动，才会判断是否到达页面底部；如果是throttle,只要页面滚动就会间隔一段时间判断一次； 优点：有效减轻服务器的压力； 代码实现：

const throttle = (fn, delay) => {  let loading = false  return (...args) => {    if (loading) return    loading = true    setTimeout(() => {      fn.apply(this, args)      loading = false    }, delay)  }}

转载地址：https://blog.csdn.net/yyychocolate/article/details/108076411 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！