标签：media 搜索 多次提交 计时 多次 一次函数 按钮 bsp 监控
一、防抖
原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
场景：
1.按钮提交场景，防止多次提交按钮，只执行最后一次的提交
2.搜索框联想场景，防止联想发送请求，只发送最后一次输入
简易版：
function debounce (func, wait) { let timeout return function () { const context = this const args = arguments clearTimeout(timeout) timeout = setTimeout(function () { func.apply(context, args) }, wait) } }
立即执行版：
有时希望立刻执行函数，然后等到停止触发n秒后才可以重新触发执行
function debounce (func, wait, immediate) { let timeout return function () { const context = this const args = arguments if (timeout) clearTimeout(timeout) if (immediate) { const callNow = !timeout timeout = setTimeout(function () { timeout = null }, wait) if (callNow) func.apply(context, args) } else { timeout = setTimeout(function () { func.apply(context, args) }, wait) } } }
二、节流
原理：规定在一个单位时间内，只能触发一次函数。如果这个函数在这个单位时间内触发多次函数，只有一次生效
场景：
1.拖拽：固定时间内只执行一次，防止超高频次触发位置变动
2.缩放：监控浏览器resize
function throttle (func, wait) { let timeout return function () { const context = this const args = arguments if (!timeout) { timeout = setTimeout(function () { timeout = null func.apply(context, args) }, wait) } } }
标签：media 搜索 多次提交 计时 多次 一次函数 按钮 bsp 监控
原文地址：https://www.cnblogs.com/yaxinwang/p/13841533.html
