使用函數(shù)節(jié)流與函數(shù)防抖的目的，就是為了節(jié)約計(jì)算機(jī)資源，提升用戶體驗(yàn)。js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover，input輸入框的keypress等事件在觸發(fā)時(shí)，會(huì)不斷地調(diào)用綁定在事件上的回調(diào)函數(shù)，極大地浪費(fèi)資源，降低前端性能。為了優(yōu)化體驗(yàn)，需要對(duì)這類事件進(jìn)行調(diào)用次數(shù)的限制。

防抖：短時(shí)間內(nèi)大量觸發(fā)，但只執(zhí)行一次。原理：設(shè)置定時(shí)器，delay時(shí)間后執(zhí)行事件處理，期間每次觸發(fā)事件都會(huì)將定時(shí)器重置，直到delay時(shí)間內(nèi)無第二次事件觸發(fā)。

function debounce (func, delay) {let task = nullreturn function (...args) {if (task) {clearTimeout(task)}task = setTimeout(() => {func.apply(this, args)}, delay)} }// 使用 let debounceFunc = debounce(scrollEvent, 300) document.getElementById("my_input").addEventListener("keydown", function () {debounceFunc(456) }) function scrollEvent(args) {console.log("滾動(dòng)" + args);//滾動(dòng)456 }

節(jié)流：隔一段時(shí)間執(zhí)行一次，期間被多次觸發(fā)也不管。實(shí)現(xiàn)原理：設(shè)置定時(shí)器，delay時(shí)間后執(zhí)行事件處理，當(dāng)事件執(zhí)行完后清除定時(shí)器。

function throttle (func, delay) {let task = nullreturn function (...args) {if (!task) {task = setTimeout (() => {task = nullfunc.apply(this, args)}, delay)}}}// 使用 let throttleFunc = throttle(scrollEvent, 300) document.addEventListener("scroll", function () {throttleFunc(123) }) function scrollEvent(args) {console.log("滾動(dòng)" + args); }

對(duì)于兩函數(shù)中的func.apply(this, args)，之前感覺一直沒弄清楚，于是查了很多資料，以下是自己的分析。

知識(shí)點(diǎn)詳解：

1.定時(shí)器回調(diào)函數(shù)中的this指向問題：

（1）如果沒有特殊指向，setInterval和setTimeout的回調(diào)函數(shù)中this的指向都是window。這是因?yàn)镴S的定時(shí)器方法是定義在window下的。

（2）call,apply,bind可以修改this指向

（3）箭頭函數(shù)沒有自己的this，它的this繼承自外部函數(shù)的作用域。

因此上面代碼setTimeout中的this繼承外層匿名函數(shù)的this，也就是節(jié)流和防抖函數(shù)的調(diào)用者。

2.apply方法的使用

Function.apply(obj,args)可將函數(shù)的this對(duì)象指向obj，args則為函數(shù)的輸入?yún)?shù)，以數(shù)組形式傳入。

上面代碼中func.apply(this, args)則是將func的this指向改為setTimeout中的this，也就是將func的this指向改為節(jié)流和防抖函數(shù)的調(diào)用者。

上文所寫的節(jié)流和防抖函數(shù)的返回值是一個(gè)函數(shù)，因此在調(diào)用時(shí)可以給其傳參，輸入?yún)?shù)可以使用剩余參數(shù)語法(...rest)寫入返回的匿名函數(shù)中function (args)，并利用func.apply(this, args)的第二個(gè)參數(shù)傳給func。

總結(jié)

以上是生活随笔為你收集整理的手写防抖和节流中的一些细节的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。