標簽：java out tps rip lse 渲染 頻繁 壓力 s函數
函数防抖和函数节流都是对函数进行特殊的设置，减少该函数在某一时间段内頻繁触发带来的副作用。二者只是采用的设置方式和原理不一样，其最终的目的是一样的。
函數防抖和函數節流都是定義一個函數，該函數接收一個函數作爲參數，並返回一個添加了防抖或節流功能後的函數。
因此可以將函數防抖和函數節流看作是一個函數工廠，負責對傳進來的函數進行相應的加工改造，然後産出一個新的帶有某種功能的函數。
函數防抖是某一時間內只執行一次，而函數節流是間隔時間執行
假如有這樣一個場景：在某一頁面，有一個按鈕是 ，这个按钮的作用就是使用 ajax 从后端服务器请求更多的数据展示在页面，我们都知道，ajax 请求的响应是一个异步的，会存在一定的响应时间，如果用户在点击了该按钮后，立马又点击了一下该按钮，按照常规回调函数的操作，回调函数会立马又执行一次，那么就是用户短时间内点击了两次 按钮后就会执行回调函数向后端发起了两次一模一样的 ajax 请求，服务器会一一接收请求并处理返回数据，短时间内两次请求还好，如果用户连续点击了 n 次 按钮呢？那就会短时间内向服务器发送了 n 次一模一样的请求，每次后端处理 ajax 请求后返回数据后页面就会重新再渲染一次，尽管内容没有改变，这样就会带来性能上的问题，不仅为服务器带去了壓力，也为浏览器带来了不必要的渲染，这就是函数頻繁执行带来的副作用。
那么如何设置这个按钮的点击事件回调函数才能减少该函数頻繁执行带来的副作用呢？
函數防抖的設計思路就是在函數執行前加一個等待時間，在這個等待時間內如果該函數又需要執行一次，就重新計算等待時間，再次等待，依次類推，直到等待時間到了，還沒有等到函數又需要執行的情況，才會執行這個函數。
就拿上述的场景来说，假设向后台发送 ajax 请求的响应时间大概是在 2s 左右，那就设置这个等待时间为 2s，当用户第一次点击 按钮后，该回调函数并没有立即执行，也就是还没有开始发送 ajax，此时该函数在等待，如果在 2s 内用户又点击了 ，那就重新计算等待时间，再等待 2s ，此时 2s 过去了，用户没再第三次点击 按钮了，那么该函数就开始执行了，向后端发送 ajax 请求了。
函數防抖實現方式如下：
function debounce(fn, delay){
let timeId = null
return function(){
let context = this
if(timeId){window.clearTimeout(timeId)}
timeId = setTimeout(()=>{
fn.apply(context, arguments)
timeId = null
},delay)
}
}https://www.98891.com/article-79-1.html
函數節流的設計思路是在函數執行後加一個冷卻時間，函數在第一次執行時是立馬執行，但在其執行完後設置一個冷卻時間，在冷卻時間內，該函數不能再次執行，直到冷卻時間結束允許該函數執行了，才可以再次執行。
就拿上述的场景来说，冷却时间假设也设置为 2s，在用户第一次点击 后按钮的回调函数就会执行，也就是会向后台发送 ajax 请求，此时用户又立马再次点击了 按钮，由于此刻 2s 的冷却时间还没有到，那么就会给第二次的函数执行加上一个延迟执行。
function throttle(fn, delay){
let canUse = true
return function(){
if(canUse){
fn.apply(this, arguments)
canUse = false
setTimeout(()=>canUse=true, delay)
}
}
}標簽：java out tps rip lse 渲染 頻繁 壓力 s函數
原文地址：https://www.cnblogs.com/moluy/p/14933954.html
