スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

要素へのクリックを間引くやつ 第三弾

主にEnterおしっぱで怒涛の勢いで発生するクリックイベントを抑える役割。
前回のクリックから指定時間が経過していなければ破棄する。
(名前はdebounceだけど実行してから~だから挙動は結構違う)

(。ゝω・)ノ*:゚・☆ リンクへの連続クリックを一定時間内は無効にする
(。ゝω・)ノ*:゚・☆ 前回からN秒間クリックできなくする
と経て、現在は以下のようになっている。

const clickDebounce = do{
let weakmap;
function evtFunc(e){
const data = weakmap.get(e.target);
data.time+data.interval < Date.now() || e.preventDefault();
data.time = Date.now();
}
(function clickDebounce(element, interval){
if(!(element instanceof Element) || typeof interval!=='number'){
throw new TypeError('invalid argument');
}else if(!weakmap){
weakmap = new WeakMap();
}
weakmap.set(element, {
interval,
time: 0
});
element.addEventListener('click', evtFunc, false);
return element;
});
}


やっていることは第二弾と同じで前回クリック時と今回クリック時のms同士の比較である。変わったのは引数のチェックが入ったのとintervalを引数にした要素毎に別々で管理するようになったこと。後者はWeakMapでメモリリークの恐れを軽減しながら引数にした要素を記録できるようになったお陰でできるようになった。ややこしくなっただけ使いやすくもなったと思うけど、あらためて見ると初回のままでよかったような気もする。おしまい。
関連記事

コメントの投稿

非公開コメント

すポンサードリンク
最新記事
カテゴリ
DN (57)
CSS (2)
いろいろ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。