Web Design Leaves

<input type="text" id="data-input" oninput="saveInput()">

// input 要素
const dataInput = document.getElementById('data-input');
// イベントハンドラ
const saveInput = () => {
  console.log('Data saved:', dataInput.value, new Date().toLocaleString());
}

// Debounce 関数
const debounce = (func, timeout = 200) => {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args)
    }, timeout);
  }
}

// input 要素
const dataInput = document.getElementById('data-input');
// 元のイベントハンドラ
const saveInput = () => {
  console.log('Data saved:', dataInput.value, new Date().toLocaleString());
}
// debounce() で元のイベントハンドラを拡張
const debouncedSaveInput = debounce(saveInput, 500);

<input type="text" id="data-input" oninput="debouncedSaveInput()">

<input type="text" id="data-input">

// input 要素
const dataInput = document.getElementById('data-input');
// 元のイベントハンドラ
const saveInput = () => {
  console.log('Data saved:', dataInput.value, new Date().toLocaleString());
}
// 元のイベントハンドラを Debouce で拡張した関数
const debouncedSaveInput = debounce(saveInput, 500);

// addEventListener のコールバックに上記 debouncedSaveInput を指定
dataInput.addEventListener('input', debouncedSaveInput);

// input 要素
const dataInput = document.getElementById('data-input');

// debounce() で拡張したコールバック関数（リスナー）
const callback = debounce( (e) => {
  console.log('Data saved:', e.target.value, new Date().toLocaleString());
} ,500)

dataInput.addEventListener('input',callback);

const dataInput = document.getElementById('data-input');

dataInput.addEventListener('input', debounce((e) => {
  console.log('Data saved:', e.target.value, new Date().toLocaleString());
} ,500));

// Debounce の定義
const debounce = (func, timeout = 200) => {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args)
    }, timeout);
  }
}
// 対象の要素を取得
const foo = document.querySelector('.foo');
// 対象の要素のスタイル
const fooStyle = foo.style;
// 対象の要素の中の span 要素
const fooSpan = foo.querySelector('span');
// 上記 span 要素にウィンドウ幅を出力
fooSpan.textContent = window.innerWidth;

// debounce() で拡張した resize イベントのリスナー
const callback = debounce( (e) => {
  // 乱数から16進数の色を生成
  const color = "#" + Math.random().toString(16).slice(-6);
  // 上記で生成した色を背景色に設定
  fooStyle.backgroundColor = color;
  // ウィンドウ幅を更新
  fooSpan.textContent = e.target.innerWidth;
}, 500)

window.addEventListener('resize',callback);

<div class="foo">
  <p>window width: <span></span> px</p>
</div>

const debounce_leading = (func, timeout = 300) =>{
  let timer;  //タイマーID
  return function(...args) {
     // timer が true の場合は関数を呼び出さない
    if (!timer) {
      // timer が undefined（false）であれば関数を呼び出す
      func.apply(this, args);
    }
    // タイマーをクリア
    clearTimeout(timer);
    // timer を更新（timer は正の整数なので true になる）
    timer = setTimeout(() => {
      // timeout 後に timer を undefined にするようにスケジュール
      timer = undefined;
    }, timeout);
  };
}

<button id="btn">Single Click</button>

let count =0;
//クリックイベントのリスナーを上記の Debounce で拡張
document.getElementById('btn').addEventListener('click', debounce_leading(()=> {
  count ++;
  console.log(count);
},500))

const debounce = (func, timeout, immediate = false) => {
  let timer;
  return function(...args) {
    const context = this;
    const callNow = immediate && !timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
      // timeout後に timer を undefined にスケジュール
      timer = undefined;
      if (!immediate) {
        // immediate が false であれば関数を呼び出し
        func.apply(context, args);
      }
    }, timeout);
    if (callNow) {
      // immediate が true で且つ timer が undefined であれば即座に関数を呼び出す
      func.apply(context, args);
    }
  };
};

_.debounce(func, [ wait = 0 ], [ options = {} ])

<div class="foo">
  <p>window width: <span></span> px</p>
</div>
<!-- Lodash を CDN 経由で読み込む  -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
const foo = document.querySelector('.foo');
const fooStyle = foo.style;
const fooSpan = foo.querySelector('span');
fooSpan.textContent = window.innerWidth;

// debounce() の代わりに  _.debounce() を使用
const callback = _.debounce( (e) => {
  const color = "#" + Math.random().toString(16).slice(-6);
  fooStyle.backgroundColor = color;
  fooSpan.textContent = e.target.innerWidth;
}, 500)

window.addEventListener('resize',callback);
</script>

<button id="btn">Single Click</button>
<!-- Lodash を CDN 経由で読み込む  -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
let count =0;
// debounce() の代わりに  _.debounce() を使用し、第三引数にオプションを指定
document.getElementById('btn').addEventListener('click', _.debounce(()=> {
  count ++;
  console.log(count);
}, 500, {
  'leading': true,  //タイムアウト前での呼び出しを指定
  'trailing': false  //後続の関数（タイムアウト後）の呼び出しを無視
}))
</script>

const throttle_debounce = (func, timeout, debounce = false) => {
  let timer;
  let lastTime;
  return function (...args) {
    const context = this;
    if (!debounce && !lastTime) {
      func.apply(context, args);
      lastTime = Date.now();
    } else {
      clearTimeout(timer);
      timer = setTimeout( () => {
        func.apply(context, args);
        lastTime = Date.now();
      },debounce ? timeout : timeout - (Date.now() - lastTime) );
    }
  }
}

const throttleValue = document.getElementById('throttle-value');
const debounceValue = document.getElementById('debounce-value');
const ww = window.innerWidth;
throttleValue.textContent = ww;
debounceValue.textContent = ww;

window.addEventListener('resize', throttle_debounce( (e)=> {
  throttleValue.textContent = e.target.innerWidth;
  //console.log('throttle : ' , e.target.innerWidth)
}, 300));

window.addEventListener('resize', throttle_debounce( (e)=> {
  debounceValue.textContent = e.target.innerWidth;
  //console.log('debounce: ' , e.target.innerWidth)
}, 500, true));

<table>
  <tr>
    <th>throttle </th>
    <td id="throttle-value"></td>
  </tr>
  <tr>
    <th>debounce</th>
    <td id="debounce-value"></td>
  </tr>
</table>

const throttle_debounce = (func, timeout, debounce = false, immediate = false) => {
  let timer;
  let lastTime;
  if(!debounce && immediate) {
    //第三引数が false で第四引数が true の場合は警告をコンソールに出力
    console.warn('you need to set debounce true to set immediate true')
  }
  return function (...args) {
    const context = this;
    const callNow = immediate && debounce && !timer;
    if (!debounce && !lastTime) {
      func.apply(context, args);
      lastTime = Date.now();
    } else {
      clearTimeout(timer);
      timer = setTimeout( () => {
        if (!immediate) {
          func.apply(context, args);
          lastTime = Date.now();
        }
        timer = undefined;
      },debounce || immediate ? timeout : timeout - (Date.now() - lastTime) );
      if (callNow) {
        func.apply(context, args);
      }
    }
  }
}

_.throttle(func, [ wait = 0 ], [ options = {} ])

// Lodash の throttle()
function throttle(func, wait, options) {
  var leading = true,
      trailing = true;

  if (typeof func != 'function') {
    throw new TypeError(FUNC_ERROR_TEXT);
  }
  if (isObject(options)) {
    leading = 'leading' in options ? !!options.leading : leading;
    trailing = 'trailing' in options ? !!options.trailing : trailing;
  }
  // debounce() にパラメータを指定して返している
  return debounce(func, wait, {
    'leading': leading,
    'maxWait': wait,
    'trailing': trailing
  });
}

<div class="bar">
  <p>window width: <span></span> px</p>
</div>
<!-- Lodash を CDN 経由で読み込む  -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
// 背景色の候補
const colors = ['yellow', 'blue', 'green', 'red', 'pink', 'orange', 'purple', 'gray','teal']
const bar = document.querySelector('.bar');
const barStyle = bar.style;
const barSpan = bar.querySelector('span');
barSpan.textContent = window.innerWidth;

// _.throttle() で拡張した resize イベントのリスナー
const callback = _.throttle( (e) => {
  // その時の幅の値から背景色を決定
  const color = colors[Math.floor(e.target.innerWidth) % 9]
  barStyle.backgroundColor = color;
  barSpan.textContent = e.target.innerWidth;
}, 500)

window.addEventListener('resize',callback);
</script>