1、節(jié)流原理

如果持續(xù)觸發(fā)事件，每隔一段時(shí)間只執(zhí)行一次函數(shù)。意思就是針對調(diào)用頻率高的函數(shù)，通過設(shè)置延時(shí)，使其在執(zhí)行后間隔一段時(shí)間，才允許進(jìn)行下一次的函數(shù)運(yùn)行，避免重復(fù)頻繁的調(diào)用導(dǎo)致的瀏覽器性能以及ajax重復(fù)調(diào)用問題。之前基本上是使用JavaScript節(jié)流函數(shù)去控制，實(shí)際上css也能做到節(jié)流。以下將以按鈕的點(diǎn)擊事件來舉例。

2、css 實(shí)現(xiàn)思路

（需要用到 pointer-events、animation以及:active） 對點(diǎn)擊事件進(jìn)行限制：通過CSS pointer-events 屬性，點(diǎn)擊一次之后一定時(shí)間內(nèi)禁用觸發(fā)點(diǎn)擊事件；

• pointer-events 屬性用于設(shè)置元素是否對鼠標(biāo)事件做出反應(yīng)。
• css語法：pointer-events: auto|none;
• 設(shè)置禁止時(shí)間：通過animation
• 設(shè)置動(dòng)畫時(shí)間（點(diǎn)擊事件禁用時(shí)間）
• 觸發(fā)時(shí)機(jī)：通過偽類:active觸發(fā)animation的動(dòng)畫

可以理解成是對 CSS 動(dòng)畫的進(jìn)行控制，比如有一個(gè)動(dòng)畫控制按鈕從禁用->可點(diǎn)擊的變化，每次點(diǎn)擊時(shí)讓這個(gè)動(dòng)畫重新執(zhí)行一遍，在執(zhí)行的過程中，一直處于禁用狀態(tài)，借此達(dá)到“節(jié)流”的效果。

3、實(shí)現(xiàn)代碼

在button按鈕上綁定點(diǎn)擊事件

<button @click="buttonClick">保存</button>
 
buttonClick() {
    console.log("節(jié)流-----保存");
},

設(shè)置css  animation動(dòng)畫效果，并綁定到button上

@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}
button {
  animation: throttle 2s step-end forwards;
}

注意：這里動(dòng)畫的緩動(dòng)函數(shù)設(shè)置成了階梯曲線 step-end，step-end 會(huì)使 keyframes 動(dòng)畫到了定義的關(guān)鍵幀處直接突變，并沒有變化的過程，用來達(dá)到 pointer-events 的明顯變化時(shí)間點(diǎn)。

pointer-events在0~2秒內(nèi)的值都是none，一旦到達(dá)2秒，就立刻變成了all，由于是forwards，會(huì)一直保持all的狀態(tài)。

在點(diǎn)擊時(shí)重新執(zhí)行一遍動(dòng)畫，只需要在按下時(shí)設(shè)置動(dòng)畫為none就行了

button:active{
  animation: none;
}

為了更直觀的看到節(jié)流效果，可以把顏色變化也加在動(dòng)畫里

@keyframes throttle {
  from {
    color: red;
    pointer-events: none;
  }
  to {
    color: green;
    pointer-events: all;
  }
}

4、借助 CSS 來監(jiān)聽事件

webkit-animation動(dòng)畫有三個(gè)事件：

• 開始事件: webkitAnimationStart
• 結(jié)束事件: webkitAnimationEnd
• 重復(fù)運(yùn)動(dòng)事件: webkitAnimationIteration

var o = document.getElementById("div1");
// 動(dòng)畫開始時(shí)事件
o.addEventListener("webkitAnimationStart", function() {
    console.log("動(dòng)畫開始");
})
// 動(dòng)畫重復(fù)運(yùn)動(dòng)時(shí)事件
o.addEventListener("webkitAnimationIteration", function() {
    console.log("動(dòng)畫重復(fù)運(yùn)動(dòng)");
})
// 動(dòng)畫結(jié)束時(shí)事件
o.addEventListener("webkitAnimationEnd", function() {
    console.log("動(dòng)畫結(jié)束");
})

在本示例中，可以通過:active去觸發(fā)transition變化，然后通過監(jiān)聽transition回調(diào)去動(dòng)態(tài)設(shè)置按鈕的禁用狀態(tài)，實(shí)現(xiàn)如下

<button onclick="console.log('保存1')">測試click</button>
<button class="throttle" onclick="console.log('保存2')">節(jié)流----css</button>

button {
  user-select: none;
}
.throttle {
  opacity: 0.99;
  transition: opacity 2s;
}
.throttle:not(:disabled):active {
  opacity: 1;
  transition: 0s;
}

然后監(jiān)聽transition的起始回調(diào)

document.addEventListener("transitionstart", function (ev) {
    ev.target.disabled = true;
});
document.addEventListener("transitionend", function (ev) {
    ev.target.disabled = false;
});

這樣做的最大好處是，這部分禁用的邏輯是完全和業(yè)務(wù)邏輯是解耦的，可以在任意時(shí)候，任意場合下無縫接入，也不受框架和環(huán)境影響。

5、總結(jié)

以上通過 CSS 的思路實(shí)現(xiàn)了類似“節(jié)流”的功能，相比 JS 實(shí)現(xiàn)而言，實(shí)現(xiàn)更精簡、使用更簡單，沒有框架限制，下面一起總結(jié)一下實(shí)現(xiàn)要點(diǎn)：

• 函數(shù)節(jié)流是一個(gè)非常常見的優(yōu)化方式，可以有效避免函數(shù)過于頻繁的執(zhí)行；
• CSS 的實(shí)現(xiàn)思路和 JS 不同，重點(diǎn)在于在于找到和該場景相關(guān)聯(lián)的屬性；
• CSS 實(shí)現(xiàn)“節(jié)流”其實(shí)就是對一個(gè)動(dòng)畫的進(jìn)行精準(zhǔn)控制；
• 還可以通過 transition 屬性的回調(diào)函數(shù)動(dòng)態(tài)設(shè)置按鈕禁用態(tài)；
• 這種實(shí)現(xiàn)的好處在于禁用邏輯和業(yè)務(wù)邏輯是完全解耦的。

到此這篇關(guān)于css 動(dòng)畫實(shí)現(xiàn)節(jié)流的示例代碼的文章就介紹到這了,更多相關(guān)css 動(dòng)畫實(shí)現(xiàn)節(jié)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論