面试必问防抖节流

防抖节流作为性能优化的大能,面试几乎是必考,我建议不仅要好好看,还要自己上手写一下它的代码。

我这里我简单的例子向大家介绍这两个的概念,为的就是大家都能看懂还一下就能记住。

防抖:当事件触发后,等待一段时间才会执行,如果等待时间内再次触发则重新记时。

例如:一个输入框,用户输入内容会显示和输入相关的提示:

如果是需要向后端拿数据,那么这个提示其实就是触发了接口请求。

防抖就是在用户停止输入内容一段时间后再向后端发送请求,防止用户快速输入内容导致前端一直向后端不断发送请求

代码:

js 复制代码
<body>

<input type="text" id="input" placeholder="Type here">

<script>
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

// 获取输入框元素
const inputElement = document.getElementById('input');

// 创建一个处理输入事件的函数
function handleInput() {
  console.log('Input value:', inputElement.value);
  // 在这里可以添加需要处理的逻辑
}

// 使用防抖函数包装输入事件处理函数,并设置延迟时间为 300 毫秒
const debouncedInputHandler = debounce(handleInput, 2000);

// 监听输入事件,并应用防抖处理
inputElement.addEventListener('input', debouncedInputHandler);
</script>

</body>

节流:多次触发事件后,每隔一段时间执行一次

例如:一个登陆按钮,你点击登陆它没反应,你就一直快速点击发现登陆进去了,其实它设定了时间间隔,假设前端设置了5s,那5s内你怎么点击都不会触发事件,5s后才会触发事件。

代码:

js 复制代码
<body>

    <ul>
        <li id="li">点击</li>
    </ul>
    <script>
function throttle(func, delay) {
  let timer;
  return function() {
    if (!timer) {
      func.apply(this, arguments);
      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  };
}

// 使用节流函数包装需要节流处理的函数,并设置时间间隔为 500 毫秒
const throttledClickHandler = throttle(handleClick, 3000);

// 在实际使用中,例如监听点击事件时使用节流函数
 document.getElementById('li').addEventListener('click', throttledClickHandler);

function handleClick(){
    console.log('click');
}
    </script>
</body>

将func的this绑定到document.getElementById('li'),这和显示绑定有关。

说到底节流就是你被硬控了几秒,这段时间你动不了,时间过了才能动。

相关推荐
别拿曾经看以后~12 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死15 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试18 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人27 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人28 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR33 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香35 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969338 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai43 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter