1、節(jié)流原理

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

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

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

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

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

3、實現(xiàn)代碼

在button按鈕上綁定點擊事件

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

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

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

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

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

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

button:active{
  animation: none;
}

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

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

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

webkit-animation動畫有三個事件：

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

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

在本示例中，可以通過:active去觸發(fā)transition變化，然后通過監(jiān)聽transition回調(diào)去動態(tài)設(shè)置按鈕的禁用狀態(tài)，實現(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ù)邏輯是解耦的，可以在任意時候，任意場合下無縫接入，也不受框架和環(huán)境影響。

5、總結(jié)

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

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

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

最新評論