前端常见面试题:防抖和节流

el/2024/2/26 0:25:22

防抖(debounce)

  • 监听一个输入框,文字变化后触发change事件
  • 使用keyup事件,则会频繁触发change事件

举例:公交司机会等所有乘客上车后才关车门,而不是上一个开关门一次。

防抖:用户在输入结束或暂停的时候,才会触发change事件。
(注册账号填写用户名、密码时的提示,调整窗口大小完成后,才计算窗口大小,防止重复渲染)

let input1 = document.getElementById('input1');function debounce(fn, delay = 100) {//delay默认为100ms//timer是闭包中的let timer = null;return function () {//timer有值时,重置null(在delay时间之内连续输入时)if (timer) {clearTimeout(timer)}timer = setTimeout(() => {//暂停或结束输入,执行函数fn.apply(this, arguments)//重置timertimer = null}, delay)}
}input1.addEventListener('keyup', debounce(function () {console.log(input1.value)
}, 500))

节流(throttle)

  • 拖拽一个元素,要随时拿到该元素被拖拽的位置
  • 直接用drag事件,则会频繁触发,很容易导致卡顿

举例:RPG在发射后,需重新装弹(过一定时间)才能继续发射

节流:限定一个函数每隔一定时间执行一次
*(百度、谷歌等搜索引擎的搜索框的联想功能,表单重复提交,滚动加载)
*

//HTML
<style>#div1 {width: 300px;height: 250px;border: 2px solid #ccc;}
</style><div id="div1" draggable="true">拖拽</div>
//JavaScript
const div1 = document.getElementById('div1');function throttle(fn, delay = 100) {let timer = nullreturn function() {if(timer) {return}timer = setTimeout(() => {fn.apply(this, arguments)timer = null}, delay)}
}div1.addEventListener('drag', throttle(function(e) {console.log(e.offsetX, e.offsetY)
}, 200))

http://www.ngui.cc/el/1461158.html

相关文章

webpack热更新报错:Refused to apply style from ‘http://127.0.0.1:9000/main.8b0a1621.css‘ because its MIME

webpack热更新无效 打开控制台一看&#xff0c;报了下面的错&#xff1a; 原来是无法访问到打包后的样式资源&#xff0c;测试后纯js是可以热更新的。 网上搜了很多答案&#xff0c;绝大部分都是路径问题&#xff0c;但实际上我这不是路径问题&#xff0c;点击链接可以在控…

从头再来(给奥运失利的健儿们)

奥运会已经开幕5天了&#xff0c;中国队在前两天开了一个很好的头&#xff0c;但是随着体操男团的失利和中国弱势项目的相继开赛&#xff0c;中国的夺金势头大大受挫。很多优势项目都出现了无谓的失误&#xff0c;跳水&#xff0c;羽毛球&#xff0c;乒乓球&#xff0c;射击他们…

通过几个非常实用的例子了解asp中使用正则表达式

? 通过几个非常实用的例子了解asp中使用正则表达式 我们知道&#xff0c;在 VBscript 5.0 开始支持 正则表达式&#xff0c;下面我们通过几个常用的应用例子来帮助我们了解和使用 这个好的程序书写格式1首先&#xff0c;密码验证 我们的密码验证的规则是--密码的第一个字母不…

SHA1 加密

举个简单例子&#xff0c;下面这个是 SHA1 加密的一个函数&#xff0c;完全可以用来加密口令&#xff0c; SHA1 加密是 160 位的哈希加密方法。&#xff08;两个不同字串加密后重复的概率极低&#xff0c;能将小的变化放到成大的变化&#xff0c;即是只错一个字母&#xff0c;加…

[转] 构架师之路

构架师&#xff08;Architecture&#xff09;是目前很多软件企业最急需的人才&#xff0c;也是一个软件企业中薪水最高的技术人才。换句话说&#xff0c;构架师是企业的人力资本&#xff0c;与人力资源相比其能够通过构架、创新使企业获得新的产品、新的市场和新的技术体系。那…

asp程序权限控制的代码

重要代码&#xff0c;将这些代码拷贝到代码配置文件中。&#xff08;代码配置文件就是一个普通的asp文件&#xff0c;所有的公共代码都放到这 个文件中&#xff0c;其他需要调用公共代码的就通过include将这个文件包含进去。 权限验证代码RightString&#xff1a;权限串&#x…

[转]在网页中动态的生成一个gif图片

大家知道股票网站的K线图是动态生成的定时刷新PHP 就有动态生成图片的功能那么怎样用asp.net在网页中动态的生成一个图片呢&#xff1f;下面我要举的例子是动态的生成一个图片显示当前时间namespace Wmj{using System;using System.Drawing;using System.Web.UI; public clas…

[转]Windows 2000 下 RDS 配置详解

在Windows 2000下面&#xff0c;由于RDS的缺省安全配置同IIS4不同&#xff0c;从而造成RDS无法正常使用&#xff0c;以下是本人根据微软 MDAC 2.6 SDK 的 ADO 文档中关于RDS的说明部分翻译并整理总结而成的配置步骤&#xff0c;在我所配置的服务器中都获得成功&#xff0c;现供…

OpenSchema方法技术探讨(一)

? 从提供者获取数据库模式信息。 语法 set connectionserver.createobject(“adodb.connection“) Set recordset connection.OpenSchema (QueryType, Criteria, SchemaID) 返回值 返回包含模式信息的 Recordset 对象。Recordset 将以只读、静态游标打开。 参数 Quer…

OpenSchema方法技术探讨(二)

利用openschema可以获得所有表的主键&#xff0c;当然这只是它的很多功能中的一个。 connstr "ProviderMSDAORA.1;User IDliujincai;passwordljc1001;Data Sourcehp1" set mmserver.CreateObject("adodb.connection") mm.Open connstr Const adSchemaPri…