函数节流(js的问题)

函数节流也用到了高阶函数的知识,因为比较重要,所以单开了一个标题。
javascript中的函数在大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理。但是在一些少数情况下,函数可能被很频繁的调用,而造成大的性能问题。
(1)函数被频繁调用的场景

1.window.onresize事件
2.mousemove事件
3.上传进度

(2)函数节流的原理
解决函数触发频率太高的问题,需要我们按照时间段来忽略一些事件请求。
(3)函数节流的代码实现
详情可以参考
Underscore.js#throttle
Underscore.js#debounce
简单实现:
将即将被执行的函数用steTimeout延时一段时间执行。如果该次延时执行还没有完成,就忽略掉接下来调用该函数的请求。

var throttle = function ( fn, interval ) {var __self = fn, // 保存需要被延迟执行的函数引用timer, // 定时器firstTime = true; // 是否是第一次调用return function () {var args = arguments,__me = this;if ( firstTime ) { // 如果是第一次调用,不需延迟执行__self.apply(__me, args);return firstTime = false;}if ( timer ) { // 如果定时器还在,说明前一次延迟执行还没有完成return false;timer = setTimeout(function () { // 延迟一段时间执行clearTimeout(timer);timer = null;__self.apply(__me, args);}, interval || 500 );};};window.onresize = throttle(function(){console.log( 1 );}, 500 );

另一种实现函数节流的方法-分时函数

某些函数确实是用户主动调用的,但是因为一些客观的原因,这些函数会严重的影响页面的性能。
一个例子就是创建QQ好友列表。如果一个好友列表用一个节点表示,当我们在页面中渲染这个列表的时候,可能要一次性的网页面中创建成百上千个节点。

var ary = [];
for ( var i = 1; i <= 1000; i++ ){ary.push( i ); // 假设ary 装载了1000 个好友的数据
};var renderFriendList = function( data ){for ( var i = 0, l = data.length; i < l; i++ ){var div = document.createElement( 'div' );div.innerHTML = i;document.body.appendChild( div );}
};renderFriendList( ary );

在短时间内网页面中大量添加DOM节点显然也会让浏览器吃不消。
这个问题的解决方案之一是下面的timeChunk函数:让创建节点的工作分批进行

//第一个参数是创建节点时需要的数据,第二个参数封装了创建节点逻辑的函数,第三个参数表示每一批创建节点的数量。
var timeChunk = function( ary, fn, count ){var obj,t;var len = ary.length;var start = function(){for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){var obj = ary.shift();fn( obj );}};return function(){t = setInterval(function(){if ( ary.length === 0 ){ // 如果全部节点都已经被创建好return clearInterval( t );}start();}, 200 ); // 分批执行的时间间隔,也可以用参数的形式传入};
};var ary = [];
for ( var i = 1; i <= 1000; i++ ){ary.push( i );
};
var renderFriendList = timeChunk( ary, function( n ){var div = document.createElement( 'div' );div.innerHTML = n;document.body.appendChild( div );
}, 8 );
renderFriendList();

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

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

相关文章

【Linux】多线程编程

目录 1. 线程基础知识 2. 线程创建 3. 线程ID&#xff08;TID&#xff09; 4. 线程终止 5. 线程取消 6. 线程等待 7. 线程分离 8. 线程互斥 8.1 初始化互斥量 8.2 销毁互斥量 8.3 互斥量加锁和解锁 9. 可重入和线程安全 10. 线程同步之条件变量 10.1 初始化条件变…

Qt图像处理-亮度、对比度、灰度、锐化、负片的实现

本文演示Qt中图像的亮度、对比度、灰度、锐化、负片处理实现 一、概述 亮度和对比度原理 图像亮度通俗理解便是图像的明暗程度,数字图像 f(x,y) = i(x,y) r(x, y) ,如果灰度值在[0,255]之间,则 f 值越接近0亮度越低,f 值越接近255亮度越高。而且我们也要把亮度和对比…

Maven下载及安装自用版

Maven下载及安装自用版 可能是Maven用久了。感觉Maven用起来还算顺手&#xff0c;比Gradle要好上手一些。 一、下载 Maven 下载地址 注意下载版本和依赖要求&#xff0c;下载后&#xff0c;解压放在指定的位置;注意安装地址&#xff0c;放在自己规划好的开发环境专用文件夹里…

ubuntu创建apt-mirror本地仓库

首先创建apt-mirror的服务端&#xff0c;也就是存储所有apt-get下载的文件和依赖。大约需要300G&#xff0c;预留400G左右空间就可以开始了。 安装ubuntu省略&#xff0c;用的是ubuntu202204 ubuntu挂载硬盘&#xff08;不需要的可以跳过&#xff09;: #下载挂载工具 sudo apt…

C++类与对象(一)

目录 一&#xff0c;面向过程和面向对象初步认识 二&#xff0c;类的引入 三&#xff0c;类的定义 四&#xff0c;类的访问限定符及封装 五&#xff0c;类的实例化 六&#xff0c;类对象模型 七&#xff0c;this指针 一&#xff0c;面向过程和面向对象初步认识 c语言是面…

使用动画曲线编辑器打造炫酷的3D可视化ACE

前言 在制作3D可视化看板时&#xff0c;除了精细的模型结构外&#xff0c;炫酷的动画效果也是必不可少的。无论是复杂的还是简单的动画效果&#xff0c;要实现100%的自然平滑都是具有挑战性的工作。这涉及到物理引擎的计算和对动画效果的数学建模分析。一般来说&#xff0c;只…

HPM6750系列--第七篇 Visual Studio Code使用openocd调试查看外设信息

一、目的 在《HPM6750系列--第四篇 搭建Visual Studio Code开发调试环境》我们已经手把手指导大家如何在visual studio code中进行开发&#xff0c;包括编译调试等步骤以及相关配置文件。 但是在实际调试时发现找不到芯片寄存器实时显示的窗口&#xff0c;本篇主要讲解如何实现…

天翼云盘秒变硬盘分享

https://cloud.189.cn/web/share?codeAvUnqaj6NNza&#xff08;访问码&#xff1a;wf4r&#xff09;y 以下介绍为作者开发的单机版软件&#xff0c;可用于Windows环境中将天翼云盘挂载为本地硬盘&#xff0c;确实可以达到本地硬盘的使用感知&#xff0c;对于多终端数据副本一…

电子信息、物联网专业大学生如何提高动手能力

作为一名电子类或物联网类专业学生&#xff0c;仅仅掌握专业基础理论知识是不够的&#xff0c;还需要增加实际动手能力和实践经验。那么&#xff0c;动手实践能力真的那么重要吗&#xff1f;我们应该怎么提高动手能力呢&#xff1f;本文就谈谈这些问题。 所谓动手能力&#xf…

移植Modelsim仿真工程

背景 上班在公司用的PC1生成并完整的进行了仿真&#xff0c;打包成zip&#xff0c;经过微信传输并在家里的PC2上打开想要继续进行仿真&#xff0c;需要如何处理呢&#xff1f; 环境 软件路径公司PC1Quartus II Prime Pro 21.4C:\intelfpga_pro\21.4\quartus\bin64\qpro.exeMo…

python的Pandas库介绍

&#x1f388; 博主&#xff1a;一只程序猿子 &#x1f388; 博客主页&#xff1a;一只程序猿子 博客主页 &#x1f388; 个人介绍&#xff1a;爱好(bushi)编程&#xff01; &#x1f388; 创作不易&#xff1a;喜欢的话麻烦您点个&#x1f44d;和⭐&#xff01; &#x1f388;…

JAVA:深入探讨Map的多种遍历方式

1、简述 在现代编程中&#xff0c;Map&#xff08;映射&#xff09;是一种常见的数据结构&#xff0c;用于存储键-值对。在许多编程语言中&#xff0c;Map提供了灵活的数据组织方式&#xff0c;但为了充分发挥其功能&#xff0c;我们需要了解多种遍历方式。本文将深入探讨Map的…

网络基础——路由协议及ensp操作

目录 一、路由器及路由表 1.路由协议&#xff1a; 2.路由器转发原理&#xff1a; 3.路由表&#xff1a; 二、静态路由优缺点及特殊静态路由默认路由 1.静态路由的优缺点&#xff1a; 2.下一跳地址 3.默认路由 三、静态路由配置 四、补充备胎 平均负载 五、补充&…

Maven的安装配置流程

步骤一&#xff1a;下载Maven 打开Maven官方网站&#xff0c;进入"Download"页面。我这里有下好的&#xff0c;网盘链接在文末&#xff01;&#xff01; 在"Download"页面中找到最新版本的Maven&#xff0c;选择一个稳定的版本。通常&#xff0c;你会看到…

05 python数据容器

5.1 数据容器认识 5.2 python列表 5.2.1 列表的定义 演示数据容器之&#xff1a;list 语法&#xff1a;[元素&#xff0c;元素&#xff0c;....] #定义一个列表List List [itheima,uityu,gsdfg] List1 [itheima,6666,True] print(List) print(List1) print(type(List)) pr…

开源 Serverless 框架 Laf 性能优化实践

介绍 Laf 是一个完全开源的 Serverless 框架&#xff0c;Laf 的 Node.js 运行时容器 (以下简称为 Runtime) 是 Laf 的函数执行环境&#xff0c;依托于 Express.js 框架。采用容器进程常驻的方式&#xff0c;每一个应用对应于一个或多个容器 (弹性伸缩下)&#xff0c;底层使用了…

el-table自定义表格数据

如上所示&#xff1a; 表格内的数据是&#xff1a;当前班级所在名次段的人数 / 当前班级1至n名的累计人数 5/12 也就是 5/75 需要变更为&#xff1a; 截至到当前名次段总人数&#xff08;上次考试&#xff09; / 截至到当前名次段总人数&#xff08;本次考试&#xff09…

CMMI评估认证,引领行业潮流!

CMMI评估认证的重要性 CMMI&#xff08;能力成熟度模型集成&#xff09;评估认证&#xff0c;作为软件和系统工程等领域的国际标准&#xff0c;正逐渐成为全球企业追求卓越的必备手段。CMMI评估认证的重要性在于它不仅能够为企业提供可衡量的质量标准&#xff0c;还能够帮助企业…

阿里云RDS MySQL 数据如何快速同步到 ClickHouse

云数据库 RDS MySQL 和 云数据库 ClickHouse 是阿里云推出的两个备受欢迎的数据库解决方案&#xff0c;它们为用户提供了可靠的数据存储方案、分析数仓方案&#xff0c;本文介绍如何快速将 RDS MySQL 的数据同步到云数据库 ClickHouse。 如何快速将RDSMySQL的数据同步到云数据库…

数据结构与算法之美学习笔记:35 | Trie树:如何实现搜索引擎的搜索关键词提示功能?

目录 前言什么是“Trie 树”&#xff1f;如何实现一棵 Trie 树&#xff1f;Trie 树真的很耗内存吗&#xff1f;Trie 树与散列表、红黑树的比较解答开篇内容小结 前言 本节课程思维导图&#xff1a; 搜索引擎的搜索关键词提示功能&#xff0c;我想你应该不陌生吧&#xff1f;为…