節(jié)流指的避免過于頻繁的執(zhí)行一個(gè)函數(shù)，例如：一個(gè)保存按鈕，為了避免重復(fù)提交或者服務(wù)器考慮，往往需要對(duì)點(diǎn)擊行為做一定的限制，不然會(huì)頻繁的請(qǐng)求接口，之前基本上是通過js去控制節(jié)流問題，其實(shí)css也能做到節(jié)流

一、 css 實(shí)現(xiàn)思路（需要用到 pointer-events、animation以及:active）

1. 對(duì)點(diǎn)擊事件進(jìn)行限制，也就是禁用點(diǎn)擊事件，利用pointer-events
   1. pointer-events 屬性用于設(shè)置元素是否對(duì)鼠標(biāo)事件做出反應(yīng)。
   2. 值：none 不做反應(yīng)auto 默認(rèn)值
2. 利用動(dòng)畫animation，去改變當(dāng)前按鈕是否可點(diǎn)擊
3. 利用偽類 :active 觸發(fā)按鈕時(shí)機(jī)，就是點(diǎn)擊行為

作用：實(shí)現(xiàn)按鈕節(jié)流，利用css動(dòng)畫的控制，比如一個(gè)動(dòng)畫控制按鈕從禁用-》可點(diǎn)擊的變化，每次點(diǎn)擊都讓動(dòng)畫重新執(zhí)行一次，就能達(dá)到節(jié)流的效果

實(shí)現(xiàn)方式：

首先利用animation寫一個(gè)禁用開啟的動(dòng)畫

@keyframes cssThrottle { 
  from {
     pointer-events: none;
  }
  to {
      pointer-events: all;
  }
}

其次：把動(dòng)畫綁定到按鈕上（設(shè)置延遲3s）

button {
     animation: cssThrottle 3s step-end forwards;
}

animation的 相關(guān)屬性

• step-end=》 steps(1, end)
• step-start =》 steps(1, start)

step() 表示過度的情況
比如steps(5, end)，表示把我們的動(dòng)畫分成了多少等分end表示從開始的時(shí)候就執(zhí)行，最后那段被忽視，start則相反

forwards end時(shí)表示最后那一段就交給forwards處理，就是第五段

二、利用監(jiān)聽css的 transition 達(dá)到節(jié)流效果

通過:active去觸發(fā)transition變化，然后通過監(jiān)聽transition回調(diào)去動(dòng)態(tài)設(shè)置按鈕的禁用狀態(tài)

button{
  opacity: .99;
  transition: opacity 2s;
}
button:not(:disabled):active{ 
  opacity: 1;
  transition: 0s;
 }

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

// 過渡開始
document.addEventListener('transitionstart', function(ev){
   ev.target.disabled = true
})
// 過渡結(jié)束
document.addEventListener('transitionend', function(ev){
   ev.target.disabled = false 
})

注意：這兩種的話，安全性不高，可以通過 ui層面去繞開

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

最新評(píng)論