南京网站开发南京乐识专注,wordpress teamtalk,百度手机助手,济南网站开发哪家好说在前面 在现代Web开发中#xff0c;提高网页性能是至关重要的。本文介绍了防抖和节流这两种常用的性能优化技术#xff0c;通过控制函数的执行频率#xff0c;有效减少不必要的计算和网络请求#xff0c;从而提升用户体验和页面加载速度。 函数节流
节流是指限制一个函数…说在前面 在现代Web开发中提高网页性能是至关重要的。本文介绍了防抖和节流这两种常用的性能优化技术通过控制函数的执行频率有效减少不必要的计算和网络请求从而提升用户体验和页面加载速度。 函数节流
节流是指限制一个函数在一定时间内只执行一次。当持续触发事件时保证每隔一段时间只执行一次事件处理函数。举例来说假设有一个按钮点击事件会触发某个函数通过节流的方式即使用户频繁点击按钮该函数也只会在一定时间间隔内执行一次。
function throttle(func, ms 1000) {//标记是否可以执行let canRun true;return function (...args) {//不可执行if (!canRun) return;//执行后设置不可执行canRun false;//设置执行周期setTimeout(() {func.apply(this, args);//重置标记canRun true;}, ms);}
}测试
const task () { console.log(run task) };
const throttleTask throttle(task, 1000);
//鼠标连续点击在设置的执行周期内只会触发一次
window.addEventListener(click, throttleTask);应用
滚动加载加载更多或滚动到底部监听搜索框搜索联想功能高频点击提交表单重复提交
函数防抖
防抖是指在事件被触发指定时间后才执行事件处理函数。如果在这个指定时间内又有相同事件被触发则这个计时就会被重新开始。举例来说假设有一个输入框用于搜索用户在输入过程中会触发搜索事件通过防抖的方式可以确保用户停止输入一段时间后才执行实际的搜索操作避免频繁触发搜索请求。
function debounce(func, ms 1000) {//定时器IDlet timer;return function (...args) {//清除定时器if (timer) {clearTimeout(timer);}//设置函数执行时间timer setTimeout(() {func.apply(this, args);}, ms);}
}测试
const task () { console.log(run task) };
const debounceTask debounce(task, 1000);
//鼠标连续点击只会触发最后一次
window.addEventListener(click, debounceTask);应用 :
手机号、邮箱正则输入检测搜索框输入用户最后一次输入完再发送请求窗口大小窗口调整完成后计算窗口大小防止重复渲染
公众号
关注公众号『前端也能这么有趣』获取更多新鲜内容。
说在后面 这里是 JYeontu现在是一名前端工程师有空会刷刷算法题平时喜欢打羽毛球 平时也喜欢写些东西既为自己记录 也希望可以对大家有那么一丢丢的帮助写的不好望多多谅解 写错的地方望指出定会认真改进 偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章有兴趣的也可以关注下。在此谢谢大家的支持我们下文再见 。
