JavaScript防抖函数和节流函数的实现

最新推荐文章于 2023-05-25 11:35:53 发布

ArthurHsing

最新推荐文章于 2023-05-25 11:35:53 发布

阅读量134

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_21522331/article/details/107646066

版权

javascript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

直接上代码，逻辑十分清晰

防抖函数

<body>
  <script>
	const fn = (a, b) => {
	  console.log('滚动啦！');
	  console.log(a, b)
	}
	const debounce = (fn, wait) => {
	  let timer = null;
	  return (...args) => {
	    if (timer) { clearTimeout(timer) }
	    timer = setTimeout(() => {
	      fn.apply(this, args)
	    }, wait);
	  }
	}
	const debouncedFn = debounce(fn, 1000);
	window.addEventListener('scroll', (event) => {
	  debouncedFn('cqupt', 'computer science');
	});
  </script>
</body>

节流函数

<body>
  <button onclick="handleClick()">click</button>
  <script>
    const throttle = function (fn, gap = 500) {
      let now, pre, timer;
      return function () {
        if (timer) {
          clearTimeout(timer)
          timer = null;
        }
        now = Date.now().toString();
        if (typeof pre === 'undefined' || now - pre > gap) {
          fn.apply(this, arguments);
          pre = now
        } else if (timer == null) {
          timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null;
          }, gap);
        }
      }
    }
    function myFn(name, age) {
      console.log(name, age);
    }
    const throttledMyFn = throttle(myFn, 1000);
    function handleClick(event) {
      throttledMyFn('arthur', 24);
    }
  </script>
</body>