Javascript関数の手ぶれ防止と関数節流

Javascriptは手ぶれと節流を防ぎます.
関数ジッパー(Debounce)
debounce:イベントトリガが一定時間停止してから応答の関数が実行されます.期間中に呼び出し動作を繰り返すと、時間が再計算されます.本質的には、複数回の操作を1回の操作に統合します.一つのタイマーでメンテナンスできます.イベントのトリガ後、wait時間内にイベントが繰り返された場合、現在のタイマーをキャンセルして、待ち時間をwaitに設定し直します.

function debounce(fn,wait){
	var timer;
	return function(){
		if(timer){
			clearTimeout(timer);
		};
		var args = Array.prototype.slice.apply(arguments);
		timer = setTimeout(function(){
			fn.apply(this, args);
		},wait);
	}
}

すぐに実行できるバージョンもあります.

function debounce(func, wait, immediate) {
    let timer;

    return function() {
        let context = this;
        let args = arguments;

        if (timer) clearTimeout(timer);
        if (immediate) {
            var callNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, wait)
            if (callNow) func.apply(context, args)
        } else {
            timer = setTimeout(function() {
                func.apply(context, args)
            }, wait);
        }
    }
}

関数の流れ
throttle:イベントトリガー後、wait時間内に実行関数が再起動し、実行関数が実行されなくなります.規定時間後にイベントが発生したら、実行関数は再実行できます.waitイベント内でイベントを繰り返し、タイマーをリセットしません.

//   1
function throttle(fn,wait){
	var isExecute = false;
	return function(){
		var args = Array.prototype.slice.apply(arguments);
		if(isExecute) {
			return;
		}
		isExecute = true;
		setTimeout(function(){
			fn.apply(this,args);
			isExecute = false
		},wait)
	}
}

//   2
function throttle(fn,wait){
	var lastTime = new Date().getTime();
	var firstTime = true;
	return function(){
		var args = Array.prototype.slice.apply(arguments);
		var curTime = new Date().getTime();
		if( firstTime ){
			firstTime = false;
		} else if((curTime - lastTime) < wait){
			return;
		};
		lastTime = curTime;
		fn.apply(this,args);
	}
}

上記の関数は、元の関数を変更しない関数を返します.手ぶれや節流を防ぐには、戻りの関数を呼び出す必要があります.
手ブレ防止効果(JSrun)-非本コード
参考文献

Javascript関数手ぶれ防止と節流

JSの関数ジッパー