js性能优化之函数节流(分流函数)
函数节流的原理
比如我们在window.onresize事件中要打印当前浏览器窗口的大小,在我们通过拖拽来改变窗口大小时候,打印窗口大小这个工作1s就运行了10次。而实际上我们只需要2次或者3次。
比如这行代码
window.onresize = function() {
console.log(1);
}
分流函数实现的思路
实现的思路就是将即将被执行的函数用setTimeout延迟一段时间再执行。如果该次执行还没有完成,则忽略下面调用该函数的请求。
因此这个节流函数有两个参数,一个是需要被执行的函数,另一个是延迟的时间
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)
}
}
.
js性能优化之函数节流(分流函数)的更多相关文章
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- JavaScript 中函数节流和函数去抖的讲解
JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...
- JavaScript函数节流和函数防抖之间的区别
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- js 性能优化 篇一
JS性能优化 摘自:http://www.china125.com/design/js/3631.htm 首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...
- js性能优化文章集锦
总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...
- JavaScript 函数节流和函数去抖应用场景辨析
概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- javascript中的函数节流和函数去抖
带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...
随机推荐
- gprc-java与golang分别实现服务端,客户端,跨语言通信(二.golang实现)
1.编译器protoc, 下载地址:https://github.com/protocolbuffers/protobuf/releases (下载对应的版本, 解压后放到go的bin中) 2.安装 ...
- ajax从入门到深入精通
前言 ajax全称Asynchronous Javascript and XML.其中Asynchronous代表异步.同步于异步是描述通信模式的概念,同步机制:发送方发生请求后,需要等待接收到接收方 ...
- 10MongoDB
一. 介绍MongoDB 1. NoSQL 1)“NoSQL”⼀词最早于1998年被⽤于⼀个轻量级的关系数据库的名字 随着web2.0的快速发展, NoSQL概念在2009年被提了出来 2)NoSQ ...
- python-opencv 分离图片(视频)中的某一颜色物体
看代码: import cv2 as cv import numpy as np def separate_color(frame): cv.imshow("原图", frame) ...
- ARP 协议
1. 什么是ARP协议? 网络层以上的协议用IP地址来标识网络接口,但以太数据帧传输时,以物理地址来标识网络接口.因此我们需要进行IP地址与物理地址之间的转化.对于IPv4来说,我们使用ARP地址解析 ...
- PHP 安装完成后 增加 bcmath 模块
1. cd /usr/local/src/php-5.6.38/ext/bcmath 目录2. /usr/local/php/bin/phpize 生成configure需要的配置文件3. ./ ...
- ssh服务介绍
基本介绍 ssh:安全的远程登陆 要有客户端与服务器端,客户端主动链接服务端,那么服务端地址是不能变的. socket:套接字 标识应用唯一的地址 tcp/udp port端口号 cat /etc/s ...
- 如何实时查看mysql当前连接数?
1.查看当前所有连接的详细资料: ./mysqladmin -uadmin -p -h10.140.1.1 processlist2.只查看当前连接数(Threads就是连接数.): ./mysqla ...
- 04004_使用JavaScript完成注册表单数据校验
1.需求分析 (1)用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验): (2)前端校验 ...
- Oracle中有关日期的语法
Oracle中有关日期的语法 Oracle提供了丰富的日期函数.利用日期函数可以灵活的对日期进行运算. to_date()函数——将字符串转换为日期型 to_date()函数用于将字符串转换为日期.被 ...