前端面试练习24.3.8

news/2024/4/21 14:00:19/文章来源:https://blog.csdn.net/xhc6666/article/details/136558837

防抖和节流

防抖(Debouncing):

防抖是指在短时间内连续触发同一事件时,只执行最后一次触发的事件处理函数。

在实际应用中,常常用于处理用户输入的搜索框或者滚动事件。例如,当用户连续输入搜索关键词时,如果没有防抖处理,每次输入都会触发搜索请求,造成不必要的请求发送和资源浪费。而通过防抖技术,可以等待一定的时间间隔,只有在用户停止输入后才触发搜索请求,从而减少请求次数,提高性能。

节流(Throttling):

节流是指在一定时间间隔内只执行一次事件处理函数。

与防抖不同的是,节流不会等待最后一次触发事件,而是在规定的时间间隔内执行事件处理函数,然后忽略剩余的触发事件。

节流常用于处理滚动事件、窗口调整大小事件等频繁触发的事件。例如,在网页中,当用户快速滚动页面时,如果没有节流处理,滚动事件会频繁触发,影响页面性能和流畅度。而通过节流技术,可以限制滚动事件的触发频率,使页面能够更加平滑地滚动。

代码实现:

/*** 防抖函数,在一定时间内只执行一次函数,避免函数因频繁触发而过度消耗性能** @param func 要防抖的函数* @param wait 等待时间,单位为毫秒* @returns 返回防抖后的函数*/
function debounce(func, wait) {// 定义一个变量timeoutId,用于存储setTimeout的返回值let timeoutId;// 返回一个函数return function () {// 获取当前函数的上下文和参数const context = this;const args = [...arguments];// 如果timeoutId存在,则清除之前的setTimeout定时器if (timeoutId) clearTimeout(timeoutId);// 设置一个新的setTimeout定时器,等待wait毫秒后执行func函数,并将上下文和参数传递给func函数timeoutId = setTimeout(() => {func.apply(context, args);}, wait);};
}// 节流函数
/*** 节流函数,限制函数的执行频率** @param func 要进行节流的函数* @param wait 两次执行之间的时间间隔,单位毫秒* @returns 返回一个新的函数,该函数在wait毫秒内只执行一次func函数*/
function throttle(func, wait) {// 定义一个变量lastTime,用于存储上一次触发的时间let lastTime = 0;// 返回一个函数return function () {// 获取当前函数的上下文和参数const context = this;const args = [...arguments];// 获取当前时间戳const now = Date.now();// 如果距离上次触发的时间间隔大于wait毫秒,则执行func函数,并更新lastTime为当前时间戳if (now - lastTime >= wait) {func.apply(context, args);lastTime = now;}};
}/*** 节流函数,限制函数的执行频率** @param func 要进行节流的函数* @param interval 两次执行之间的时间间隔,单位毫秒* @returns 返回一个新的函数,该函数在 interval 毫秒内只执行一次 func 函数*/
function throttle(func, interval) {// 定义一个定时器IDlet timeoutId;// 返回一个新的函数return function (...args) {// 获取当前上下文const context = this;// 如果定时器ID不存在if (!timeoutId) {// 设置定时器timeoutId = setTimeout(() => {// 在定时器回调函数中执行原始函数,并传入参数func.apply(context, args);// 将定时器ID置为nulltimeoutId = null;}, interval);}};
}

原生JS实现懒加载

方案一

使用getBoundingClientRect()方法用于获取元素的大小及其相对于视口的位置信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Lazy Loading Example</title><style>.lazy-img {width: 100%;height: 200px;background: #ccc;margin: 10px 0;}</style>
</head>
<body><div class="lazy-img-container"><img class="lazy-img" data-src="image1.jpg" alt="Image 1"><img class="lazy-img" data-src="image2.jpg" alt="Image 2"><img class="lazy-img" data-src="image3.jpg" alt="Image 3"><!-- 更多图片 --></div><script>document.addEventListener("DOMContentLoaded", function() {var lazyImages = document.querySelectorAll('.lazy-img');var lazyLoad = function() {lazyImages.forEach(function(img) {if (img.getBoundingClientRect().top < window.innerHeight && !img.src) {img.src = img.dataset.src;}});};// 第一次加载页面时执行一次懒加载lazyLoad();// 滚动事件触发时检查是否需要加载图片window.addEventListener('scroll', lazyLoad);});</script>
</body>
</html>

方案二

通过计算得到一些数据

(1) window.innerHeight 是浏览器可视区的高度
(2) document.body.scrollTop || document.documentElement.scrollTop是浏览器滚动的过的距离
(3) imgs.offsetTop 是元素顶部距离文档顶(3)部的高度(包括滚动条的距离)
(4) 图片加载条件:img.offsetTop - document.body.scrollTop< window.innerHeight ;

图示:

判断打印结果(参数传递修改,创建实例)

解释:

在这段代码中,首先创建了一个名为 p1 的对象,该对象包含了 nameage 属性。然后定义了一个名为 test 的函数,该函数接受一个参数 person。在函数内部,首先修改了传入的 person 对象的 age 属性为 26,然后又重新赋值了 person 对象为一个新的对象 { name: 'hzj', age: 18 }。最后返回了这个新对象。

在函数外部,调用 test 函数时将 p1 对象传入,并将返回值赋给了变量 p2。因为 JavaScript 中的对象是按引用传递的,所以当在函数内部修改 person 对象时,实际上是在修改传入的对象的引用,因此 p1 对象的 age 属性也会被修改为 26。但是在重新赋值 person 对象后,p1 对象不会受到影响,因为此时 person 变量指向了一个新的对象。因此最终输出 p1 对象时,其 age 属性为 26;而输出 p2 对象时,其 age 属性为 18

const p1 = {name: 'fyg',age: 19
};function test(person) {person.age = 26;person = {name: 'hzj',age: 18};return person;
}const p2 = test(p1);
console.log(p1); // { name: 'fyg', age: 26 }
console.log(p2); // { name: 'hzj', age: 18 }

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

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

相关文章

使用Pytorch导出自定义ONNX算子

在实际部署模型时有时可能会遇到想用的算子无法导出onnx&#xff0c;但实际部署的框架是支持该算子的。此时可以通过自定义onnx算子的方式导出onnx模型&#xff08;注&#xff1a;自定义onnx算子导出onnx模型后是无法使用onnxruntime推理的&#xff09;。下面给出个具体应用中的…

leetcode:LCR 006. 两数之和 II - 输入有序数组(python3解法)

难度&#xff1a;简单 给定一个已按照 升序排列 的整数数组 numbers &#xff0c;请你从数组中找出两个数满足相加之和等于目标数 target 。 函数应该以长度为 2 的整数数组的形式返回这两个数的下标值。numbers 的下标 从 0 开始计数 &#xff0c;所以答案数组应当满足 0 <…

【教程】 iOS构建版本无效问题解决方案

引言 在进行iOS应用上架时&#xff0c;有时会遇到构建版本无效的问题&#xff0c;即通过XCode上传成功后&#xff0c;但在App Store Connect的TestFlight中无法显示构建版本&#xff0c;或者显示一会儿后就消失了。本文将介绍可能的原因分析&#xff0c;并提供解决问题的方法。…

ubuntu系统(11):ubuntu20.04命令行安装vscode

目录 1、更新软件包索引&#xff0c;并且安装依赖软件 2、使用 wget 命令插入 Microsoft GPG key 3、启用vscode存储库 4、更新软件包并安装vscode 5、当前目录进入vscode 6、设置样式&#xff0c;添加所需扩展 最近换了个新的服务器&#xff0c;所以要重新配置服务器的…

[DevOps云实践] 跨AWS账户及Region调用Lambda

[DevOps云实践] 跨AWS账户及Region调用Lambda 本文將幫大家理清一下幾個問題: 如何跨不同AWS賬戶,不同Region來調用Lambda? 不同Lambda之間如何互相調用?有時我們希望我們的Lambda脚本能夠運行在多個AWS賬戶中的不同Region下,但是,我們還不希望每個下面都去建立一個運行…

算法刷题day20:二分

目录 引言概念一、借教室二、分巧克力三、管道四、技能升级五、冶炼金属六、数的范围七、最佳牛围栏八、套餐设计九、牛的学术圈I十、我在哪&#xff1f; 引言 这几天一直在做二分的题&#xff0c;都是上了难度的题目&#xff0c;本来以为自己的二分水平已经非常熟悉了&#x…

Oracle定时任务和存储过程

--1.声明定时任务 DECLAREjob NUMBER; BIGIN dbms_job.sumit(job, --任务ID,系统定义的test_prcedure(19)&#xff0c;--调用存储过程&#xff1f;to_date(20240305 02:00&#xff0c;yyyymmdd hh24:mi) --任务开始时间sysdate1/(24*60) --任务执行周期 [每分钟执行…

springboot 加入 日志+ controller 加入全局异常捕获

提下比较好点 包含将捕获的异常堆栈完整的返回给前端。方便 后端人员用 swagger 或 knife 工具验证接口时&#xff0c;直接看到异常。 有啥用呢&#xff1f;在现场环境&#xff0c;或不方便远程服务器机器时&#xff0c;非常有用&#xff01;&#xff01;&#xff01; 同时&…

统信UOS及麒麟KYLINOS操作系统上如何切换键盘布局

原文链接&#xff1a;如何切换键盘布局 | 统信UOS | 麒麟KYLINOS Hello&#xff0c;大家好啊&#xff0c;最近有朋友在群里提到他的键盘输入“Y”会显示“Z”&#xff0c;输入“Z”会显示“Y”。这个问题听起来可能有些奇怪&#xff0c;但其实并不罕见。出现这种情况的原因&…

性别和年龄的视频实时监测项目

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 性别和年龄检测 Python 项目 首先介绍性别和年龄检测的高级Python项目中使用的专业术语 什么是计算机视觉&#xff1f; 计算机视觉是使计算机能…

设计模式(十):抽象工厂模式(创建型模式)

Abstract Factory&#xff0c;抽象工厂&#xff1a;提供一个创建一系列相关或相互依赖对 象的接口&#xff0c;而无须指定它们的具体类。 之前写过简单工厂和工厂方法模式(创建型模式)&#xff0c;这两种模式比较简单。 简单工厂模式其实不符合开闭原则&#xff0c;即对修改关闭…

C#,入门教程(26)——数据的基本概念与使用方法

上一篇&#xff1a; C#&#xff0c;入门教程(25)——注释&#xff08;Comments&#xff09;你会吗&#xff1f;看多图演示&#xff0c;学真正注释。https://blog.csdn.net/beijinghorn/article/details/124681888 本文所述的知识基本上适用于C/C&#xff0c;java等其他语言。 …

Rethinking Data Augmentation for Image Super-resolution

文章目录 Rethinking Data Augmentation for Image Super-resolution:1.概述2.一些现有方法的分析3.cutblur4.MOA 各种策略的混合5.降噪6.cutblur 代码 Rethinking Data Augmentation for Image Super-resolution: A Comprehensive Analysis and a New Strategy 1.概述 根据…

【JavaScript】字符串练习

练习 1&#xff1a;"smyhvaevaesmyh"查找字符串中所有 m 出现的位置。 代码实现&#xff1a; var str2 smyhvaevaesmyh; for (var i 0; i < str2.length; i) {//如果指定位置的符号 "o"//str2[i]if (str2.charAt(i) m) {console.log(i);} }练习 2&…

蚂蚁SEO什么是蜘蛛池2024最新强势蜘蛛池

蜘蛛池是一种搜索引擎优化&#xff08;SEO&#xff09;策略&#xff0c;通过在互联网上建立大量的网站和链接&#xff0c;吸引搜索引擎的爬虫&#xff08;也称为“蜘蛛”&#xff09;访问&#xff0c;以提高网站的搜索排名和曝光率。以下是关于蜘蛛池的详细解释&#xff1a; 获…

【网站项目】202物流管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

排序算法及Arrays

冒泡排序 1.相邻的数据两两比较&#xff0c;小的放前面&#xff0c;大的放后面。 2.第一轮比较完毕后&#xff0c;最大值已经确定了&#xff0c;第二轮可以少循环一次&#xff0c;后面依次类推。 3.如果数组中有n个数据&#xff0c;总共我们只执行n-1轮的代码就可以。 pack…

K8S之实现业务的金丝雀发布

如何实现金丝雀发布 金丝雀发布简介优缺点在k8s中实现金丝雀发布 金丝雀发布简介 金丝雀发布的由来&#xff1a;17 世纪&#xff0c;英国矿井工人发现&#xff0c;金丝雀对瓦斯这种气体十分敏感。空气中哪怕有极其微量的瓦斯&#xff0c;金丝雀也会停止歌唱&#xff1b;当瓦斯…

vscode 使用ssh进行远程开发 (remote-ssh),首次连接及后续使用,详细介绍

在vscode添加remote ssh插件 首次连接 选择左侧栏的扩展&#xff0c;并搜索remote ssh 它大概长这样&#xff0c;点击安装 安装成功后&#xff0c;在左侧栏会出现远程连接的图标&#xff0c;点击后选择ssh旁加号便可以进行连接。 安装成功后vscode左下角会有一个图标 点击图…

基于springboot的迷你天猫商城设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 系统开发技术 3 1.1 Springboot 3 1.2 MyEclipse 3 1.3 MySQL 3 1.4 Apache JMeter 3 1.5 系统开发背景 4 1.6 系统需求分析 4 1.7 本章小结 4 2 系统分析 5 2.1 技术可行性分析 5 2.2 系统经济可行性分析 5 2.3 系统功能需求分析 5 2.4 …