网页性能优化03-函数防抖

2024-09-02 15:48
文章标签 网页 函数 优化 性能 03 防抖

本文主要是介绍网页性能优化03-函数防抖，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.1-函数防抖

1.函数防抖介绍

  • 1.什么是函数防抖？ （debounce）

    • 网上主流解释：函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
      • 参考博客：https://www.jianshu.com/p/f9f6b637fd6c
      • 参考博客：https://segmentfault.com/a/1190000018445196
    • 笔者解释：
      • 先理解什么是抖动？：例如用户鼠标轻微晃动，快速划过某一个元素（用户本身不想触发，只是鼠标误触发，常见于鼠标事件 移入/移出/移动 ）。 例如输入框手机和邮箱验证，用户在不停的输入，还没有输完的时候其实是不需要验证的，应该等用户输入完毕后再验证。
      • 防抖 ：如果用户鼠标轻微晃动，在某一个元素上停留时间很短，则认为是用户误触发，则不执行本次事件处理函数
        • 一句话总结：用户连续多次触发某个事件，则只执行最后一次
      • 由于函数防抖 属于 前端中的 网页性能优化技术，因此初学者刚开始学习会有一些吃力，并且很多网站都没有做防抖处理（性能优化）
        • 没有函数防抖的真实案例：http://www.elong.com/?semid=ppzqbaidu
          • 这是一个旅游类网站，上面酒店类型选择没有做防抖处理，用户体验很差
        • 有函数防抖的真实案例：https://xyq.163.com/
          • 这是网易梦幻西游官网，在网页底部选择职业的手风琴位置有做防抖处理，用户体验较好

  • 没有做函数防抖处理的用户体验如下

    • 假设当前鼠标在第一张，此时用户想看第五张。正常情况下，鼠标会依次触发 第二、第三、第四张的移入事件，但这不是用户真正想要触发的（误触发）

在这里插入图片描述

  • 有做函数防抖处理的用户体验如下
    • 用户从第一张 滑动到第五张，由于鼠标在 第二、第三、第四张停留时间很短（假设小于0.5秒），所以判定为用户误触发，则不触发对应的事件处理函数

在这里插入图片描述

2.函数防抖解决思路

  • 使用定时器：保证用户多次触发事件时，以最后一次触发为准

  • 1.每一次移入元素时 ： 不立即触发该事件处理函数，而是开启定时器，间隔0.5s(防抖间隔)之后再执行事件处理函数。

    • 此时并没有彻底解决函数防抖，因为用户多次触发事件时，每一个定时器都会在0.5s之后，依次执行

  • 2.每一次移入元素时 ： 先清除上一次的定时器

    • 保证用户多次触发事件时，以最后一次触发为准

  • 注意点：定时器中的this默认为window，需要使用上下文模式bind()动态修改为当前事件源

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>动画-案例《手风琴》</title><style>* {margin: 0;padding: 0;}ul {list-style: none;width: 2400px;}#box {width: 1200px;height: 400px;border: 2px solid red;margin: 100px auto;overflow: hidden;}#box li {width: 240px;height: 400px;float: left;}</style>
</head><body><div id="box"><ul><li><img src="./images/collapse/1.jpg" alt=""></li><li><img src="./images/collapse/2.jpg" alt=""></li><li><img src="./images/collapse/3.jpg" alt=""></li><li><img src="./images/collapse/4.jpg" alt=""></li><li><img src="./images/collapse/5.jpg" alt=""></li></ul></div><script src="./animation.js"></script><script>/*需求(1):给每一个li设置鼠标移入事件:当前li的宽度变成800,其他兄弟li宽度变成100(2):鼠标移出大盒子,所有的li的宽度都变成默认的240 *///1.获取元素var liList = document.querySelectorAll('#box li');//li元素列表var box = document.querySelector('#box');//li元素列表/* 一:声明全局变量存储定时器ID */var timeID = null;//2.注册事件//2.1 鼠标移入事件:当前li的宽度变成800,其他兄弟li宽度变成100for (var i = 0; i < liList.length; i++) {liList[i].onmouseover = function () {//二：先清除以前的定时器，以本次为准clearTimeout(timeID);//事件处理函数 ： this 指向事件源/* 三：当事件被触发时，用户可能是误操作，所以开启定时器等一会儿再执行注意点： 定时器中的this默认一定是window，需要动态修改为事件源*/timeID = setTimeout(function () {console.log(1111);// 定时器中的this : 默认指向window//3.排他思想修改样式for (var j = 0; j < liList.length; j++) {if (liList[j] == this) {//是自己animationSlow(liList[j], { width: 800 });} else {animationSlow(liList[j], { width: 100 });}};}.bind(this), 500);};};//2.2 鼠标移出大盒子,所有的li的宽度都变成默认的240 box.onmouseout = function (e) {/* 由于受到事件冒泡影响，当鼠标滑出某一个li元素也会触发父元素的移出事件解决方案：判断事件触发源是不是box，是的话才修改li元素宽度为240*/if (e.target == box) {for (var i = 0; i < liList.length; i++) {animationSlow(liList[i], { width: 240 });};};};</script></body></html>

3.万能防抖函数的封装

  • 为什么要封装万能的防抖函数
    • 在上一个小节中，我们的重点是介绍函数防抖的思路。但是在实际开发中，每一个防抖函数的事件处理都是不一样的，他们可能是鼠标移入、鼠标移出、鼠标移动。 每一个案例需要的防抖间隔也不同
/**
* @description: 万能防抖函数
* @param {type} fn : 事件处理函数
* @param {type} timeout : 防抖时间间隔
* @return: 
*/
function debounce(fn, timeout) {/*核心技术介绍 1. 函数防抖需要使用定时器，但是定时器id不能是局部的  （局部变量函数执行完毕会被回收）2. 定时器id如果使用全局变量存储，则会造成全局变量污染3. 解决方案 ：(1)使用闭包延长局部变量声明周期，但是语法过于繁琐(2)利用函数本身也是对象，使用函数本身的静态成员来存储定时器id*///1.先清除上一次触发事件的定时器clearTimeout(debounce.timeID);//2.以最后一次触发为准debounce.timeID = setTimeout(fn, 500);
};

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>动画-案例《手风琴》</title><style>* {margin: 0;padding: 0;}ul {list-style: none;width: 2400px;}#box {width: 1200px;height: 400px;border: 2px solid red;margin: 100px auto;overflow: hidden;}#box li {width: 240px;height: 400px;float: left;}</style>
</head><body><div id="box"><ul><li><img src="./images/collapse/1.jpg" alt=""></li><li><img src="./images/collapse/2.jpg" alt=""></li><li><img src="./images/collapse/3.jpg" alt=""></li><li><img src="./images/collapse/4.jpg" alt=""></li><li><img src="./images/collapse/5.jpg" alt=""></li></ul></div><script src="./animation.js"></script><script>/*需求(1):给每一个li设置鼠标移入事件:当前li的宽度变成800,其他兄弟li宽度变成100(2):鼠标移出大盒子,所有的li的宽度都变成默认的240 *///1.获取元素var liList = document.querySelectorAll('#box li');//li元素列表var box = document.querySelector('#box');//li元素列表//2.注册事件//2.1 鼠标移入事件:当前li的宽度变成800,其他兄弟li宽度变成100for (var i = 0; i < liList.length; i++) {liList[i].onmouseover = function () {debounce(function () {for (var j = 0; j < liList.length; j++) {if (liList[j] == this) {//是自己animationSlow(liList[j], { width: 800 });} else {animationSlow(liList[j], { width: 100 });}};}.bind(this), 500);};};/*** @description: 万能防抖函数* @param {type} fn : 事件处理函数* @param {type} timeout : 防抖时间间隔* @return: */function debounce(fn, timeout) {/*核心技术介绍 1. 函数防抖需要使用定时器，但是定时器id不能是局部的  （局部变量函数执行完毕会被回收）2. 定时器id如果使用全局变量存储，则会造成全局变量污染3. 解决方案 ：(1)使用闭包延长局部变量声明周期，但是语法过于繁琐(2)利用函数本身也是对象，使用函数本身的静态成员来存储定时器id*///1.先清除上一次触发事件的定时器clearTimeout(debounce.timeID);//2.以最后一次触发为准debounce.timeID = setTimeout(fn, 500);};//2.2 鼠标移出大盒子,所有的li的宽度都变成默认的240 box.onmouseout = function (e) {/* 由于受到事件冒泡影响，当鼠标滑出某一个li元素也会触发父元素的移出事件解决方案：判断事件触发源是不是box，是的话才修改li元素宽度为240*/if (e.target == box) {for (var i = 0; i < liList.length; i++) {animationSlow(liList[i], { width: 240 });};};};</script></body></html>

这篇关于网页性能优化03-函数防抖的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1130392。

相关文章

MySQL中REPLACE函数与语句举例详解

MySQL中REPLACE函数与语句举例详解

《MySQL中REPLACE函数与语句举例详解》在MySQL中REPLACE函数是一个用于处理字符串的强大工具,它的主要功能是替换字符串中的某些子字符串,：本文主要介绍MySQL中REPLACE函... 目录一、REPLACE()函数语法：参数说明：功能说明：示例：二、REPLACE INTO语句语法：参数
阅读更多...
Python多线程应用中的卡死问题优化方案指南

Python多线程应用中的卡死问题优化方案指南

《Python多线程应用中的卡死问题优化方案指南》在利用Python语言开发某查询软件时,遇到了点击搜索按钮后软件卡死的问题,本文将简单分析一下出现的原因以及对应的优化方案,希望对大家有所帮助... 目录问题描述优化方案1. 网络请求优化2. 多线程架构优化3. 全局异常处理4. 配置管理优化优化效果1.
阅读更多...
MySQL中优化CPU使用的详细指南

MySQL中优化CPU使用的详细指南

《MySQL中优化CPU使用的详细指南》优化MySQL的CPU使用可以显著提高数据库的性能和响应时间,本文为大家整理了一些优化CPU使用的方法,大家可以根据需要进行选择... 目录一、优化查询和索引1.1 优化查询语句1.2 创建和优化索引1.3 避免全表扫描二、调整mysql配置参数2.1 调整线程数2.
阅读更多...
python中update()函数的用法和一些例子

python中update()函数的用法和一些例子

《python中update()函数的用法和一些例子》update()方法是字典对象的方法,用于将一个字典中的键值对更新到另一个字典中,：本文主要介绍python中update()函数的用法和一些... 目录前言用法注意事项示例示例 1: 使用另一个字典来更新示例 2: 使用可迭代对象来更新示例 3: 使用
阅读更多...
Java慢查询排查与性能调优完整实战指南

Java慢查询排查与性能调优完整实战指南

《Java慢查询排查与性能调优完整实战指南》Java调优是一个广泛的话题,它涵盖了代码优化、内存管理、并发处理等多个方面,：本文主要介绍Java慢查询排查与性能调优的相关资料,文中通过代码介绍的非... 目录1. 事故全景：从告警到定位1.1 事故时间线1.2 关键指标异常1.3 排查工具链2. 深度剖析：
阅读更多...
Python lambda函数(匿名函数)、参数类型与递归全解析

Python lambda函数(匿名函数)、参数类型与递归全解析

《Pythonlambda函数(匿名函数)、参数类型与递归全解析》本文详解Python中lambda匿名函数、灵活参数类型和递归函数三大进阶特性,分别介绍其定义、应用场景及注意事项,助力编写简洁高效... 目录一、lambda 匿名函数：简洁的单行函数1. lambda 的定义与基本用法2. lambda
阅读更多...
Python 函数详解:从基础语法到高级使用技巧

Python 函数详解:从基础语法到高级使用技巧

《Python函数详解:从基础语法到高级使用技巧》本文基于实例代码,全面讲解Python函数的定义、参数传递、变量作用域及类型标注等知识点,帮助初学者快速掌握函数的使用技巧,感兴趣的朋友跟随小编一起... 目录一、函数的基本概念与作用二、函数的定义与调用1. 无参函数2. 带参函数3. 带返回值的函数4.
阅读更多...
MySQL中DATE_FORMAT时间函数的使用小结

MySQL中DATE_FORMAT时间函数的使用小结

《MySQL中DATE_FORMAT时间函数的使用小结》本文主要介绍了MySQL中DATE_FORMAT时间函数的使用小结,用于格式化日期/时间字段,可提取年月、统计月份数据、精确到天,对大家的学习或... 目录前言DATE_FORMAT时间函数总结前言mysql可以使用DATE_FORMAT获取日期字段
阅读更多...
深入解析Java NIO在高并发场景下的性能优化实践指南

深入解析Java NIO在高并发场景下的性能优化实践指南

《深入解析JavaNIO在高并发场景下的性能优化实践指南》随着互联网业务不断演进,对高并发、低延时网络服务的需求日益增长,本文将深入解析JavaNIO在高并发场景下的性能优化方法,希望对大家有所帮助... 目录简介一、技术背景与应用场景二、核心原理深入分析2.1 Selector多路复用2.2 Buffer
阅读更多...
SpringBoot利用树形结构优化查询速度

SpringBoot利用树形结构优化查询速度

《SpringBoot利用树形结构优化查询速度》这篇文章主要为大家详细介绍了SpringBoot利用树形结构优化查询速度,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一个真实的性能灾难传统方案为什么这么慢N+1查询灾难性能测试数据对比核心解决方案：一次查询 + O(n)算法解决
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2