一道笔试题:利用JS代码实现防抖和节流

防抖 (Debounce)

防抖的目的是在一系列连续的调用中,只有在最后一次调用后的一段时间内没有新的调用才会执行该函数。这对于一些需要在用户停止操作后才执行的场景非常有用,比如输入框的搜索建议。

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

 

节流 (Throttle)

节流的目的是保证一个函数在一定时间内只被调用一次。这可以确保函数不会因为高频触发而消耗过多资源。例如,当用户滚动页面时,我们可能只想每隔一段时间才更新数据。

function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(function() {
        inThrottle = false;
      }, limit);
    }
  };
}

 

// 使用防抖
const debouncedFunction = debounce(function() {
  console.log('This will be logged after 500ms of silence.');
}, 500);

window.addEventListener('resize', debouncedFunction);

// 使用节流
const throttledFunction = throttle(function() {
  console.log('This will be logged at most once every second.');
}, 1000);

window.addEventListener('scroll', throttledFunction);

像这种基本的而且常用的知识还是挺容易考的

posted @ 2024-08-23 21:15  最小生成树  阅读(12)  评论(0编辑  收藏  举报