分时函数 & 节流函数

1.函数节流

JavaScript 中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合 理,否则我们一般不会遇到跟性能相关的问题。但在一些少数情况下,函数的触发不是由用户直 接控制的。在这些场景下,函数有可能被非常频繁地调用,而造成大的性能问题。下面将列举一 些这样的场景

(1). 函数被频繁调用的场景

window.onresize 事件。我们给 window 对象绑定了 resize 事件,当浏览器窗口大小被拖动 而改变的时候,这个事件触发的频率非常之高。如果我们在 window.onresize 事件函数里 有一些跟 DOM节点相关的操作,而跟 DOM节点相关的操作往往是非常消耗性能的,这 时候浏览器可能就会吃不消而造成卡顿现象

mousemove 事件。同样,如果我们给一个 div 节点绑定了拖曳事件(主要是 mousemove),当 div 节点被拖动的时候,也会频繁地触发该拖曳事件函数

上传进度。微云的上传功能使用了公司提供的一个浏览器插件。该浏览器插件在真正开 始上传文件之前,会对文件进行扫描并随时通知 JavaScript函数,以便在页面中显示当前 的扫描进度。但该插件通知的频率非常之高,大约一秒钟 10次,很显然我们在页面中不 需要如此频繁地去提示用户

(2). 函数节流原理

我们整理上面提到的三个场景,发现它们面临的共同问题是函数被触发的频率太高。 比如我们在 window.onresize 事件中要打印当前的浏览器窗口大小,在我们通过拖曳来改变 窗口大小的时候,打印窗口大小的工作 1秒钟进行了 10次。而我们实际上只需要 2次或者 3次。 这就需要我们按时间段来忽略掉一些事件请求,比如确保在 500ms内只打印一次。很显然,我们 可以借助 setTimeout 来完成这件事情

var throttle = function(fn, duration) {
var _self = fn,
firstTime = true,
timer;
if (firstTime) {
fn();
return firstTime = false;
}
if(timer){
return false
} timer = setTimeout(() => {
clearTimeout(timer)
timer = null;
fn() }, duration||500);
};
window.onresize = throttle(function (params) {
console.log(1)
})

2. 分时函数

有时候是我们主动需要大量的频繁调用某个函数,比如在页面中插入1000个div。在短时间内往页面中大量添加 DOM节点显然也会让浏览器吃不消,我们看到的结果往往就 是浏览器的卡顿甚至假死

(1). 解决原理

我们可以把函数让创建节点的工作分批进行,比如把 1秒钟创建 1000个节点,改为每隔 200毫秒创建 8个节点。

 /**
* @param {Array} ary - 必填--- 要创建的集合
* @param {Function} fn -必填--- 业务逻辑代码
* @param {Number} count - 可选---每批创建几个
*/
var timeChunk = function(ary, fn, count) {
var obj,
timer;
var start = function() {
for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
obj = ary.shift()
fn(obj)
} }
return function() {
timer = setInterval(() => {
if (ary.length === 0) {
return clearInterval(timer)
}
start();
}, 500); } }
var ary = []; for (var i = 1; i <= 10; i++) {
ary.push(i);
}; var renderFriendList = timeChunk(ary, function(n) {
var div = document.createElement('div');
div.innerHTML = n;
document.body.appendChild(div);
}, 2); renderFriendList();
												

分时函数 & 节流函数的更多相关文章

  1. 浅谈javascript的函数节流

    什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...

  2. JavaScript函数节流和函数防抖之间的区别

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  3. JS的函数节流(throttle)

    什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...

  4. 【javascript】js中的函数节流和函数防抖

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  5. JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)

    我在写一个类似百度搜索框的自动提示功能时候,使用了AJAX+keydown事件.调试时候我发现,当在搜索框中输入文字的时候,控制台在不停发送AJAX.这在本地服务器测试还好,如果我把它拿到运行环境,很 ...

  6. js函数节流和函数防抖

    概念解释 函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 函数节流 函数节流应用的实际场景,多数在监听页面元素滚动事件的 ...

  7. 谈谈JS中的函数节流

    好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...

  8. JavaScript 函数节流和函数去抖应用场景辨析

    概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...

  9. JS函数节流

    背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性 ...

随机推荐

  1. Linux用户体系

    1.系统中和用户相关的文件 (1)/etc/passwd:记录系统用户信息文件 (2)/etc/shadow:系统用户密码文件 (3)/etc/group:组用户信息文件 (4)/etc/gshado ...

  2. 4、git和gitlab的配置(1)

    4.0.服务器说明: 服务器名称 ip地址 controller-node1 172.16.1.90 4.1.git介绍: 1.git分布式图: 2.git区域: 3.四种状态: 上面的操作在工作目录 ...

  3. 在Docker运行的Nignx内部署前后端分离项目

    环境准备: Linux服务器: IP: 192.168.1.10 前端打包后的Vue项目: Port-3000, 请求地址192.168.1.10:8080 后端打包后的Java项目: Port-80 ...

  4. liunx驱动之字符设备的注册

    上一篇文章学习了如何编写linux驱动,通过能否正常加载模块进行验证是否成功,有做过liunx应用开发的小伙伴都知道驱动会在'/dev'目录下以文件的形式展现出来,所以只是能加载驱动模块不能算是完成驱 ...

  5. MongoDB数据库 5分钟快速上手

    安装 本次安装使用docker镜像,安装无障碍,一行命令即可解决 # 安装镜像并启动 可以自行修改命令中的参数 ## 账户 tanoak 密码 123123 ## -p 27018:27017 映射端 ...

  6. 谈谈Java事务

    事务具基本特征(ACID) ① Atomi(原子性):事务中包含的操作被看做一个整,要么完全部成功,要么全部失败. ② Consistency(一致性):事务在完成时,必须是所有的数据都保持一致状态, ...

  7. DNS部署与安全

    1.DNS Domain Name Service 域名服务 作用: 为客户机提供域名解析服务器 2.域名组成 2.1 域名组成概述 如"www.baidu.com"是一个域名,从 ...

  8. python使用笔记14--商品管理小练习

    1 import json 2 import pymysql 3 IP = '127.0.0.1' 4 PORT = 3306 5 USER_NAME = 'root' 6 PASSWORD = '1 ...

  9. c语言:scanf(" %c",&bla); scanf("%c",&bla); 语句差别

    %前有空格,%没有空格 scanf("%c",&c) 与 scanf(" %c",&c),后者只是在%前多了个空格,似乎没有什么区别,但使用起来 ...

  10. React事件绑定的方式

    一.是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends React.Compo ...