資訊專欄INFORMATION COLUMN
摘要：綁定函數(shù)運(yùn)行上下文傳入函數(shù)參數(shù)測(cè)試函數(shù)節(jié)流函數(shù)什么是節(jié)流函數(shù)，類似與消抖函數(shù)但是不是僅僅有一個(gè)時(shí)間而已，還有一個(gè)最大時(shí)間當(dāng)超過(guò)這個(gè)事件就必須觸發(fā)。
消抖函數(shù)：
什么是消抖函數(shù)， 說(shuō)一個(gè)自己應(yīng)用的實(shí)例：
自己在做一個(gè) 項(xiàng)目里， 有一個(gè)需要監(jiān)聽(tīng) input 元素（oninput 、 onchange）， 只要 它的value 變，就需要去 向服務(wù)器拉取數(shù)據(jù)。
不做優(yōu)化的， 用戶對(duì)值進(jìn)行操作時(shí)， 都向服務(wù)器端 拉去數(shù)據(jù)。
例如： 事件A: 用戶查詢的內(nèi)容為 5個(gè)字，那么這個(gè)操作， 就會(huì)向服務(wù)器 請(qǐng)求 5次數(shù)據(jù)。
消抖就是定一個(gè)固定的t時(shí)間，延遲t時(shí)間后觸發(fā)請(qǐng)求服務(wù)器數(shù)據(jù)。
如果在t內(nèi)，用戶繼續(xù)輸入了文字。 清除上一個(gè)定時(shí)器， 重新開(kāi)一個(gè)延遲為t的定時(shí)器。否則 直接觸發(fā) 請(qǐng)求服務(wù)器數(shù)據(jù)的操作。這樣對(duì)于 事件A 來(lái)說(shuō)，選取合適的t, 最少只需要一次請(qǐng)求服務(wù)器數(shù)據(jù)。
function debouce (fn, time, ctx) {
var k = null
function exec (args) {
// 綁定 函數(shù)運(yùn)行上下文(this) && 傳入函數(shù)參數(shù)
fn.apply(ctx || null, args)
k = null
}
return function () {
var args = arguments
k !== null && clearTimeout(k)
k = setTimeout(function () {exec(args)}, time)
}
}
//測(cè)試函數(shù)
var test = debouce(function() {console.log(this);console.log(arguments)}, 3000, {a: 1})
節(jié)流函數(shù)
什么是節(jié)流函數(shù)， 類似與消抖函數(shù),但是,不是僅僅有一個(gè)時(shí)間t而已， 還有一個(gè)
最大時(shí)間 maxLog. 當(dāng)超過(guò)這個(gè)maxLog, 事件就必須觸發(fā)。 這個(gè)主要用于對(duì) 滾動(dòng)軸事件的優(yōu)化。 想想用戶 一直操作 鼠標(biāo)滾輪，不可能一直按照消抖函數(shù)那樣，一直不觸發(fā)滾動(dòng)事件相應(yīng)的處理邏輯吧。
實(shí)例demo
var thrFn = function (fn, time, maxLog) {
var timeK = null
//
var oTime = (new Date()).getTime()
var execFn = function () {
fn()
oTime = (new Date()).getTime()
}
return function () {
var nTime = (new Date()).getTime()
clearTimeout(timeK)
if (nTime - oTime > maxLog) {
execFn()
} else {
timeK = setTimeout(execFn, time)
}
}
}
個(gè)人理解，不對(duì)之處， 請(qǐng)大家指正。
下一文， 準(zhǔn)備 reudx 源碼解析。。。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93137.html
摘要：節(jié)流保證在一定時(shí)間內(nèi)，只能觸發(fā)一次。我們?cè)趪L試一下去抖消抖，消除抖動(dòng)，感覺(jué)這個(gè)更好聽(tīng)有沒(méi)有什么現(xiàn)成的上的一次發(fā)現(xiàn)源碼的經(jīng)歷以及對(duì)學(xué)術(shù)界拿來(lái)主義的思考函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)去抖的實(shí)現(xiàn) 開(kāi)篇先提幾個(gè)問(wèn)題？ 1.做搜索框的時(shí)候你使用什么事件？change?blur?keyup？你想要的效果是什么？ 2.scroll事件怎么就觸發(fā)？是滾一段距離觸發(fā)一次？還是滾一圈觸發(fā)一次？還是滾...
摘要：第三個(gè)是在里的由于在匿名函數(shù)媽媽的肚子里，但是也是個(gè)獨(dú)立的個(gè)體，，當(dāng)運(yùn)行時(shí)，發(fā)現(xiàn)函數(shù)里用的聲明，就不用再進(jìn)一步去匿名函數(shù)媽媽肚子里去找了。直接就輸出第四個(gè)是在里，但是沒(méi)有的聲明所以當(dāng)運(yùn)行時(shí)，就去匿名函數(shù)媽媽的肚子里去找，果然找到了。 個(gè)人理解，請(qǐng)大家指正 個(gè)人理解閉包作用： 閉包可以用來(lái)隔離作用域（簡(jiǎn)單來(lái)說(shuō)可以隔離 環(huán)境變量、函數(shù)...etc）,也就是說(shuō) 一般情況下 函數(shù)里申明的變量不...
摘要：工具類工具庫(kù)，封裝了處理，，，等常見(jiàn)的函數(shù)，是對(duì)標(biāo)準(zhǔn)庫(kù)的補(bǔ)充。業(yè)務(wù)開(kāi)發(fā)中常用的函數(shù)有很多，如等。示例如下整數(shù)處理保留兩位小數(shù)百分比處理億億處理萬(wàn)萬(wàn)處理格式化數(shù)字大于億的展示為億，大于萬(wàn)的展示為萬(wàn)億萬(wàn)時(shí)間處理庫(kù)。 工具類 lodash 工具庫(kù)，封裝了處理arrays，numbers，objects，string等常見(jiàn)的函數(shù)，是對(duì)標(biāo)準(zhǔn)庫(kù)的補(bǔ)充。業(yè)務(wù)開(kāi)發(fā)中常用的函數(shù)有很多，如：assign,...
摘要：概念函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。防抖任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過(guò)指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。節(jié)流指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任務(wù)一定時(shí)間內(nèi)方法只跑一次。 概念 函數(shù)防抖和函數(shù)節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。 防抖：任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過(guò)指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。 節(jié)流：指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任...
摘要：變量聲明提升在中，函數(shù)聲明與變量聲明經(jīng)常被引擎隱式地提升到當(dāng)前作用域的頂部。對(duì)象的方法和屬性是在全局范圍內(nèi)有效的。未形成標(biāo)準(zhǔn)，實(shí)現(xiàn)混亂。 前端面試題JavaScript（一） JavaScript的組成 JavaScript 由以下三部分組成： ECMAScript（核心）：JavaScript 語(yǔ)言基礎(chǔ) DOM（文檔對(duì)象模型）：規(guī)定了訪問(wèn)HTML和XML的接口 BOM（瀏覽器對(duì)...
閱讀 3968·2021-11-11 10:58
閱讀 3341·2021-09-26 09:46
閱讀 1922·2019-08-30 15:55
閱讀 987·2019-08-30 13:52
閱讀 1955·2019-08-29 13:11
閱讀 3036·2019-08-29 11:27
閱讀 1526·2019-08-26 18:18
閱讀 2648·2019-08-23 14:17
