首页 > 编程笔记 > JavaScript笔记 > JS函数
阅读:40
JS函数节流和分时函数
函数节流和分时函数是 JS 高阶函数的两种具体应用场景,它们都是将函数作为返回值 return 到函数外部。
例如,在大型网点平台的导航栏中,为了减轻 mouseover 和 mouseout 移动过快给浏览器处理带来的负担,特别是减轻涉及 Ajax 调用给服务器造成的极大负担,都会进行函数节流处理。
下面使用 throttle() 封装函数,把上面的事件处理函数转换为节流函数,同时设置延迟时间为 500 毫秒。
下面在页面中插入 10000 个 span 元素,由于数量巨大,这里使用分时函数进行分批操作。
JS函数节流
函数节流就是降低函数被调用的频率,主要是针对 DOM 事件暴露出的问题提出的一种解决方案。例如,使用 resize、mousemove、mouseover、mouseout、keydown、keyup 等事件,都会频繁的触发事件。如果这些事件的处理函数中包含大量耗时操作,如 Ajax 请求、数据库查询、DOM 遍历等,则可能会让浏览器崩溃,严重影响用户体验。例如,在大型网点平台的导航栏中,为了减轻 mouseover 和 mouseout 移动过快给浏览器处理带来的负担,特别是减轻涉及 Ajax 调用给服务器造成的极大负担,都会进行函数节流处理。
【设计思想】
让代码在间断的情况下重复执行。【实现方法】
使用定时器对函数进行节流。//函数节流封装代码,参数method表示要执行的函数,delay表示要延迟的时间,单位为毫秒 function throttle(mothod, delay) { var timer = null; //定时器句柄 return function () { //返回节流函数 var context = this, args = arguments; //上下文函数和参数对象 clearTimeout(timer); //先清理未执行的函数 timer = setTimeout(function () { //重新定义定时器,记录新的定时器句柄 method.apply(context, args); //执行预设的函数 }, delay); } }
【应用代码】
设计文本框的 keyup 事件和窗口的 resize 事件,在浏览器中拖动窗口,或者在文本框中输入字符,然后在控制台查看事件响应次数和速度。<input id="search" type="text" name="search"> <script> function queryData(text) { console.log("搜索:" + text); } var input = document.getElementById("search"); input.addEventListener("keyup", function(event) {queryData(this.value); }); var n = 0; //记录响应次数 function f() { console.log("响应次数:" + ++n); } window.onresize = f; </script>通过观察可以发现,在拖动改变窗口的一瞬间,resize 事件响应了几十次。如果在文本框中输入字符,keyup 事件会立即响应,等不到用户输入完一个单词。
下面使用 throttle() 封装函数,把上面的事件处理函数转换为节流函数,同时设置延迟时间为 500 毫秒。
input.addEventListener("keyup", function(event) { throttle(queryData, 500) (this.value); }); window.onresize = throttle(f, 500);重新进行测试,会发现拖动一次窗口改变大小,仅响应一次,而在文本框中输入字符时,也不会立即响应,等了半秒钟,才显示输入的字符。
JS分时函数
分时函数与函数节流的设计思路相近,但应用场景略有不同。当批量操作影响到页面性能时,如一次往页面中添加大量 DOM 节点,显然会给浏览器渲染带来影响,极端情况下可能会出现卡顿或假死等现象。【设计思路】
把批量操作分批处理,如把 1 秒钟创建 100 个节点,改为每隔 200 毫秒创建 100 个节点等。【实现代码】
var timeChunk = function (ary, fn, count) { var t; 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); //分批执行的时间间隔,也可以用参数的形式传入 }; };timeChunk 函数接收 3 个参数,第 1 个参数表示批量操作时需要用到的数据,第 2 个参数封装了批量操作的逻辑函数,第 3 个参数表示分批操作的数量。
下面在页面中插入 10000 个 span 元素,由于数量巨大,这里使用分时函数进行分批操作。
var arr = []; for (var i = 1; i < 10000; i ++) { var span = document.creatElement("span"); span.style.padding = "6px 12px"; span.innerHTML = i; arr.push(span); } var fn = function (obj) { document.body.appendChild(obj); } timeChunk(arr, fn, 100) ();
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频