面试官:请说说JS中的防抖和节流

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:web前端面试题库

前言

为什么要做性能优化?性能优化到底有多重要?   性能优化是为了提供更好的用户体验加快网站加载速度提高搜索引擎排名节省服务器资源适应多种设备和网络环境等方面的需求。通过不断优化性能,可以提高用户满意度、增加网站流量提高业务效果。

同时性能优化是把双刃剑,有好的一面也有坏的一面。好的一面就是可以能提升网站性能,坏的一面就是配置多,代码复杂,或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景,所以也并不是一味的追求性能优化,而是需要谨慎使用。

防抖和节流JavaScript 中常用的两种性能优化方式。面试中我们也会经常碰到。它们的作用是减少函数的执行次数,以提高代码的性能。

在进行窗口的resize、scroll、输出框内容校验等操纵的时候,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验,就可以采用防抖(debounce)和节流(throttle)的方式来到达这种效果,减少调用的频率。

防抖(Debounce)

1. 情景

  • 有些场景事件触发的频率过高(mousemoveonkeydownonkeyuponscroll),例如文本编辑器实时保存,当无任何更改操作一秒后进行保存;调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖。

  • 回调函数执行的频率过高也会有卡顿现象。 可以一段时间过后进行触发去除无用操作

2. 防抖原理

一定在事件触发 n 秒后才执行,如果在一个事件触发的 n 秒内又触发了这个事件,以新的事件的时间为准,n 秒后才执行,等触发事件 n 秒内不再触发事件才执行。

官方解释:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。(ps:个人理解这就相当于游戏中的回城键,只有读秒到规定时间点才会触发回城,期间任意时间打断都会重新计时。)

3. 防抖函数简单实现

    //简单的防抖函数function debounce(func, wait, immediate) {//定时器变量var timeout;return function () {//每次触发scrolle,先清除定时器clearTimeout(timeout);//指定多少秒后触发事件操作handlertimeout = setTimeout(func, wait);};};//绑定在scrolle事件上的handlerfunction handlerFunc() {console.log('Success');}//没采用防抖动window.addEventListener('scroll', handlerFunc);//采用防抖动window.addEventListener('scrolle', debounce(handlerFunc, 1000));

4. 防抖函数演化过程

(1)this event绑定问题

    //以闭包的形式返回一个函数,内部解决了this指向的问题,event对象传递的问题function debounce(func, wait) {var timeout;return function () {var context = this;var args = arguments;clearTimeout(timeout)timeout = setTimeout(function () {func.apply(context, args)}, wait);};};

(2) 立即触发问题

    //首次触发执行,再次触发以后开始执行防抖函数//使用的时候不用重复执行这个函数,本身返回的函数才具有防抖功能
function debounce(func, wait, immediate) {var timeout;return function () {var context = this;var args = arguments;if(timeout) clearTimeout(timeout);// 是否在某一批事件中首次执行if (immediate) {var callNow = !timeout;timeout = setTimeout(function() {timeout = null;func.apply(context, args)immediate = true;}, wait);if (callNow) {func.apply(context, args)}immediate = false;} else {timeout = setTimeout(function() {func.apply(context, args);immediate = true;}, wait);}}
}

(3)返回值问题

function debounce(func, wait, immediate) {var timeout, result;return function () {var context = this, args = arguments;if (timeout)  clearTimeout(timeout);if (immediate) {var callNow = !timeout;timeout = setTimeout(function() {result = func.apply(context, args)}, wait);if (callNow) result = func.apply(context, args);} else {timeout = setTimeout(function() {result = func.apply(context, args)}, wait);}return result;}
}

(4)取消防抖,添加cancel方法

function debounce(func, wait, immediate) {var timeout, result;function debounced () {var context = this, args = arguments;if (timeout)  clearTimeout(timeout);if (immediate) {var callNow = !timeout;timeout = setTimeout(function() {result = func.apply(context, args)}, wait);if (callNow) result = func.apply(context, args);} else {timeout = setTimeout(function() {result = func.apply(context, args)}, wait);}return result;}debounced.cancel = function(){cleatTimeout(timeout);timeout = null;}return debounced;
}

节流(Throttle)

1.情景

  • 图片懒加载
  • ajax数据请求加载

2.节流原理

如果持续触发事件,每隔一段时间只执行一次函数,控制了事件发生的频率。

官方解释:当持续触发事件时,保证一定时间段内只调用一次事件处理函数。(s:个人理解这就相当于游戏中的射击,就算你高频点击,子弹只会在固定时间段内射出。)

3.节流实现-时间戳和定时器

  • 时间戳
    var throttle = function (func, delay) {var prev = Date.now()return function () {var context = this;var args = arguments;var now = Date.now();if (now - prev >= delay) {func.apply(context, args);prev = Date.now();}}}function handle() {console.log(Math.random());}window.addEventListener('scroll', throttle(handle, 1000));
  • 定时器
    var throttle = function (func, delay) {var timer = null;return function () {var context = this;var args = arguments;if (!timer) {timer = setTimeout(function () {func.apply(context, args);timer = null;}, delay);}}}function handle() {console.log(Math.random());}window.addEventListener('scroll', throttle(handle, 1000))

4.节流函数的演化过程

  • 时间戳触发
//在开始触发时,会立即执行一次; 如果最后一次没有超过 wait 值,则不触发
function throttle(func, wait) {var context, args;var previous = 0; // 初始的时间点,也是关键的时间点return function() {var now = +new Date();context = this;args = arguments;if (now - previous > wait) {func.apply(context, args);previous = now;}}
}
  • 定时器触发
//首次不会立即执行,最后一次会执行,和用时间戳的写法互补。
function throttle(func, wait){var context, args, timeout;return function() {context = this;args = arguments;if(!timeout) {timeout = setTimeout(function(){func.apply(context, args);timeout = null;}, wait);}}
}
  • 结合时间戳和定时器
function throttle(func, wait) {var timer = null;var startTime = Date.now();  return function(){var curTime = Date.now();var remaining = wait-(curTime-startTime); var context = this;var args = arguments;clearTimeout(timer);if(remaining<=0){ func.apply(context, args);startTime = Date.now();}else{timer = setTimeout(fun, remaining);  // 如果小于wait 保证在差值时间后执行}}
}

总结

防抖:原理是维护一个定时器,将很多个相同的操作合并成一个。规定在delay后触发函数,如果在此之前触发函数,则取消之前的计时重新计时,只有最后一次操作能被触发

节流:原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数

区别:防抖只会在最后一次事件后执行触发函数,节流不管事件多么的频繁,都会保证在规定时间段内触发事件函数。

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:web前端面试题库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/188803.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库时间类型之间的转换魔法

解锁时间数据的魔法 时间&#xff0c;是数据库中一个充满魔法的复杂表现形式。在这篇博客中&#xff0c;我们将探讨在数据库中时间戳&#xff08;timestamp&#xff09;、日期&#xff08;date&#xff09;、日期时间&#xff08;datetime&#xff09;和字符串之间的转换技巧&…

Java面向对象第十天

精华笔记&#xff1a; 内存管理&#xff1a;由JVM来管理的----------我笔记里面有哪些就先记哪些 堆&#xff1a; 存储的是new出来的对象(包括实例变量、数组的元素) 垃圾&#xff1a;没有任何引用所指向的对象 垃圾回收器(GC)不定时到堆中清扫垃圾&#xff0c;回收过程是透明…

11.14 校招 实习 内推 面经

绿*泡*泡&#xff1a; neituijunsir 交流裙 &#xff0c;内推/实习/校招汇总表格 1、校招丨寒武纪24届校招重点岗位推介-软件类&#xff08;内推&#xff09; 校招丨寒武纪24届校招重点岗位推介-软件类&#xff08;内推&#xff09; 2、校招丨传音控股2024届秋招这些岗位还…

SpringBoot+Redis编写一个抢红包雨的案例。附源码。

案例演示 SpringBootRedis编写一个抢红包雨的案例。附源码 1、案例分析&#xff0c;整体方案介绍 预备上线一个红包雨活动。这个红包雨的思路是活动开始前25分钟&#xff0c;在后台创建活动。然后前端用户进入&#xff0c;到点后将设置的金额拆分成多个小红包&#xff0c;开启倒…

如何打造稳健高效的数据库基础设施?数据库云提出创新方案

引言 数据库的云化、丰富业务场景下多元的数据库类型、公有云与私有云交织的IT架构&#xff0c;叠加信创影响使得企业内部的基础设施日益复杂&#xff0c;如何高效管理多元的数据库和多云异构基础设施正成为企业面临的严峻挑战。在此背景下&#xff0c;数据库云应运而生。数据…

netty websocket学习

【硬核】肝了一月的Netty知识点 超详细Netty入门&#xff0c;看这篇就够了&#xff01; vuewebsokect实现实时聊天&#xff0c;可单聊、可群聊&#xff08;一&#xff09; vue实现聊天栏定位到最底部&#xff08;超简单、可直接复制使用&#xff09; vue实现指定div右键显示菜…

转向更卷的奶茶 库迪这是要在咖啡上认怂?

卖咖啡刚满一年&#xff0c;陆正耀就带着名为“茶猫”的奶茶项目再度登场。 根据多位网友的爆料&#xff0c;茶猫采取和库迪咖啡一样的联营商模式&#xff0c;且有低价补贴策略&#xff0c;主打低价茶饮市场&#xff0c;全场统一定价6.9元。 熟悉的加盟模式&#xff0c;熟悉的…

使用type实现接口继承效果

如何使用type实现接口继承的效果 接口继承的写法 // 接口继承 interface Person {name: stringage: numberhobby?: string say: (content: string) > void } interface Student extends Person {score: number }使用 type 模拟 interface的继承效果 // 使用type实现类似…

参考文献格式的引用

一、文献格式的快速引用 &#xff08;一&#xff09;参考文献的类型 参考文献的类型&#xff08;即引文出处&#xff09;以单字母方式标识在文献名后并以方括号括起&#xff0c;具体类型标识如下&#xff1a; M ——专著、普通图书 C ——论文集 N ——报纸文章 J ——期刊文章…

opencv-python中常用的函数及使用方法

OpenCV是一个开源计算机视觉库&#xff0c;提供了许多函数和工具&#xff0c;可以用于图像和视频处理、物体识别和跟踪、摄像机标定等任务。以下是一些常用的OpenCV函数及其使用方法的介绍&#xff1a; 1.图像读取和显示&#xff1a; cv2.imread()&#xff1a;用于读取图像文…

CSS选择器十二种方法

相信大家对元素应该是不陌生的&#xff0c;当我们页面中&#xff0c;我们想要布局&#xff0c;给元素添加样式的时候&#xff0c;我们应该怎么获取到指定元素呢&#xff1f; 优先级&#xff1a;ID 选择器 > 类选择器 > 标签选择器 > 通配符 1.元素选择器 通过标签名…

基于springboot+vue的秒杀商城(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

这是怎么了?继阿里11月故障后,淘宝这个问题20 天了还未修复!

继11月12号&#xff0c;阿里云发生大面积故障故障以来&#xff0c;已经过去了近 20天&#xff0c;但是截止到发文时间&#xff0c;作者发现淘宝还有部分功能存在问题&#xff0c;没法正常使用。 难道真是降本增笑&#xff0c;开猿截流&#xff0c;导致没有相关负责人员了&…

【超全】JavaScript知识速查:基础语法与DOM操作

JavaScript知识速查 文章目录 JavaScript知识速查[toc]JavaScript 简介在网页开发中的用途和意义&#xff1a;示例&#xff1a; JavaScript 语法JavaScript 变量定义变量命名规则&#xff1a;变量的类型&#xff1a;变量的作用域&#xff1a;示例代码&#xff1a; JavaScript 数…

业余爱好-社会工程管理记账报税

税务问题笔记 印花税税费申报及缴纳财务和行为税合并纳税申报增值税及附加税费申报企业所得税季度A类申报残疾人就业保障金申报财务报表个税申报 印花税 印花税是对在经济活动和经济交往中书立、领受具有法律效力的凭证的行为征收的一种税。 税费申报及缴纳 财务和行为税合并…

LeetCode Hot100 75.颜色分类

题目&#xff1a; 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 so…

Mybatis核心配置文件概述

MyBatis核心配置文件层级关系 configuration配置 properties属性 settings设置 typeAliases类型别名 typeHandlers类型处理器 objectFactory对象工厂 plugins插件 environments环境 environrnent 环境变量 transactionManager事务管理器 dataSource数据源 databaseldPr…

CentOS 7安装Java 8

前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 要在CentOS 7上安装Java 8&#xff0c;请按照以下步骤操作&#xff1a; 打开终端并以root身份登录。 更新系统软件包&#xff1a; …

淘宝订单接口在电商行业中的重要性

一、引言 随着电子商务的快速发展&#xff0c;电商平台已经成为人们日常生活中不可或缺的一部分。淘宝作为中国最大的电商平台之一&#xff0c;拥有庞大的用户群体和商家资源。为了满足商家和消费者之间的交易需求&#xff0c; &#xff0c;其中订单接口是其中最为重要的一部分…

大数据:Hadoop刷题

大数据&#xff1a;Hadoop刷题 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&#xff0c;尤其sql要…