関数のスロットリング
アンチシェイクの機能：1.関数を実行する特定の時間のトリガではなく、指定された時間間隔で、関数の実装では、関数の実行回数を減らすために、2.ユーザーが頻繁に時間をトリガし、唯一の時間を識別するために、最初の時間は、最後の時間として、望んでいない識別します！
- アンチスロットルでないことの効果
//コンソールでアンチスロットリングを見る
window.onscroll=function(){
console.log( ”);//=>F12 スライディングはかなり大丈夫だろう
}
- スロットリング対策サイト:underscorejs.org/
//1.アンチシェイクの効果
//2.インストール: npm i underscore
//3.使用法: コンソールを開く スライドページ 対応するスライド数に対応するイベントを挟む
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>関数のスロットリング</title>
<style>
html,body{
height:500%;
background:-webkit-linear-gradient(top left,lightblue,pink,blue);
}
</style>
</head>
<body>
<script src="node_modules/underscore/underscore.js"></script>
<script>
let count=0;
function fn() {
console.log(++count);
console.log('ok');
}
let lazyFn= _.debounce(fn,40,true)
window.onscroll=lazyFn;
</script>
</body>
</html>
- 3.要件：入力に使用されるテキストがすべて数字であるかどうかをチェックし、コンソールの出力が合法であるかどうかができます。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>関数のスロットリング</title>
</head>
<body>
<input type="text" id='inp'>
<script>
//要件：入力に使われたテキストがすべて数字かどうかをチェックし、合法であればコンソールに出力するだけでよい。
let inp=document.querySelector("#inp");
let timer=null;
inp.oninput=function(){
//この関数は、入力ボックスの内容が変わるたびに起動される
clearTimeout(timer);//内容が変更されないたびに、最後に形成されたタイマーが明らかにされる
timer=setTimeout(() => {
console.log(this.value)
}, 500);
}
</script>
</body>
</html>
//使い方: 1.2ページ目をプレビューする.オープンコンソール3.入力ボックスに内容を入力し、入力が終わるとコンソールに表示し、内容を入力する
- アンチシェイクのためのラッピング
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>関数のスロットリング</title>
<style>
html,body{
height:500%;
background:-webkit-linear-gradient(top left,lightblue,pink,blue);
}
</style>
</head>
<body>
<script>
//アンチスロットリング関数をラップする
/* debounceアンチスロットリング機能
* @params
func実行する関数
waitインターバル待ち時間
immediate開始または終了の境界で実行をトリガーする
@return 呼び出せる関数
*/
function debounce(func,wait,immediate){
let result=null;
timeout=null;
return function(...args){
let context=this;
//そろそろ
now=immediate && !timeout;
clearTimeout(timeout);//=>新しいタイマーを設定する，
//アンチ・シェイクの目的は、一度しか実行されない時間を待つことなので、セット・タイマーを削除する。
timeout=setTimeout(() => {
if(!immediate)result=func.call(context,...args);
clearTimeout(timeout);
timeout=null;
}, wait);
if(now)result=func.call(context,...args);
}
}
let count=0;
function fn() {
console.log(++count);
}
let lazyFn= debounce(fn,40,true)
window.onscroll=lazyFn;
</script>
</body>
</html>
//1.使い方: プレビューページでコンソールのスライドページを開いて効果を見る
関数のスロットリング
関数のスロットリング：関数の実行頻度を下げるために、アンチジッタリングのように一定時間内に1回しか実行しないのではなく、一定時間内に複数回実行できるようにします。
- スロットリング対策サイト:underscorejs.org/
//1.アンチシェイクの効果
//2.インストール: npm i underscore
//3.使用法: コンソールのスライドページを開く 間隔 スライドの表示回数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>関数のスロットリング</title>
<style>
html,body{
height:500%;
background:-webkit-linear-gradient(top left,lightblue,pink,blue);
}
</style>
</head>
<body>
<script src="node_modules/underscore/underscore.js"></script>
<script>
let count=0;
function fn() {
console.log(++count);
}
let lazyFn=_.throttle(fn,40,true)
window.onscroll=lazyFn;
</script>
</body>
</html>
- テキストボックスのスロットリング
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>関数のスロットリング</title>
</head>
<body>
<input type="text" id='inp'>
<script>
//
let flag=true;
inp.oninput=function(){
//この関数が最初に実行されたとき、flagはtrueなので、次のコードを判断するところまでできる。
//この関数が500ミリ秒以内に再び実行されると、フラグがまだfalseのままなので、次のコードを判断するにはまだ十分ではない。，
//500ミリ秒が経過すると、フラグがtrueに戻り、この関数が実行されると、次のコードに進む。，
//下のコードでは、フラグがfalseに設定されている。これは、次に判定以下のコードが実行されるとき、500ミリ秒待たなければならないことを意味する。
if(flag===false) return;
flag=false;
console.log(this.value)
setTimeout(()=>{
flag=true;
},500);
}
</script>
</body>
</html>
//使い方: 1.2ページ目をプレビューする.オープンコンソール3.入力ボックスの入力内容は、入力、1つおきのイベントコンソールに表示される入力内容、連続入力、1回500秒表示される
- スロットリングのカプセル化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>関数のスロットリング</title>
<style>
html,body{
height:500%;
background:-webkit-linear-gradient(top left,lightblue,pink,blue);
}
</style>
</head>
<body>
<script>
/*スロットリングのカプセル化
* throttle: 関数は実行頻度を下げるためにスロットリングされ、一定の間隔に達すると一度だけ実行される。
* @params
* func:実行する関数
* wait:設定する間隔
* @return
* 呼び出せる関数を返す
*
*/
let throttle = function (func, wait) {
let timeout = null,
result = null,
previous = 0; //=>実行タイムスタンプ
return function (...args) {
let now = new Date,
context = this;
//=>remainingが0以下であれば、この時点までの実行間隔が1時間を超えたことを示す。
let remaining = wait - (now - previous);
if (remaining <= 0) {
clearTimeout(timeout);
previous = now;
timeout = null;
result = func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(() => {
previous = new Date;
timeout = null;
result = func.apply(context, args);
}, remaining);
}
return result;
};
};
let count = 0;
function fn() {
console.log(++count);
}
let lazyFn =throttle(fn, 1000);
window.onscroll = lazyFn;
</script>
</body>
</html>
//1.使い方: プレビューページでコンソールのスライドページを開いて効果を見る
