手写题/防抖和节流函数/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖和节流测试demo</title>
</head>

<body>

  <button id="debounce">debounce</button>
  <button id="throttle">throttle</button>

  <script type="module">
    import { debounce } from "./debounce.js";
    import { throttle } from "./throttle.js";
    const debounceBtn = document.querySelector('#debounce');
    const throttleBtn = document.querySelector('#throttle');

    const test = () => {
      console.log('执行');
    };
    // const username = 'ocean'
    // const user = {
    //   username: 'ocean123',
    //   sayHello: function () {
    //     console.log(`Hello ${this.username}`);
    //   }
    // };
    // const throttleSayHello = throttle(user.sayHello, 1000);
    // throttleSayHello.apply(user)

    const debounceFn = debounce(test, 1000, true);
    const throttleFn = throttle(test, 1000);

    debounceBtn.addEventListener('click', debounceFn);
    throttleBtn.addEventListener('click', throttleFn);

  </script>
</body>

</html>