JavaScript函数节流的两种写法
最近看了函数节流的相关内容，具体什么是节流我不讨论了，网上很多，这里总结下两个方法，我只认可其中一个。另一个貌似也能达到节流的效果但是感觉不是很正规。
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数节流</title>
<style>
div{
font-size:40px;
color:red;
text-align: center;
}
</style>
</head>
<body>
<div>0</div>
<script>
var a=0;
var oDiv=document.getElementsByTagName('div')[0];
var throttle=function(fn,wait){
var startTime=new Date();
return function(){
var arg=arguments;
var context=this;
var curTime=new Date();
// 如果达到了规定的触发时间间隔，触发 handler
var remaing=wait-(curTime-startTime)
if(remaing<=0||remaing>wait){//按理说remaing足够证明已经到了时间间隔，但是为了防止客户端修改了时间所以加个条件(为什么这么加我也不懂)
fn.apply(context,arg);
startTime=curTime;
}
};
};
window.onmousemove=throttle(function(){
a++;
oDiv.innerText=a+"";
},2000);
</script>
</body>
</html>
我比较认可这个方法，另外这是简洁版，还有一种可以是这样子的
function throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔，触发 handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 没达到触发间隔，重新设定定时器
} else {
timeout = setTimeout(function(){
fun.apply(context, args);
}, delay);
}
};
};
就是在判断完时间间隔后再加个计时器来延迟，这个我觉得加不加都行，加了也没错跟时间判断互补，不加也能实现节流的效果。
第二类写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数节流</title>
<style>
div{
font-size:40px;
color:red;
text-align: center;
}
</style>
</head>
<body>
<div>0</div>
<script>
var a=0;
var oDiv=document.getElementsByTagName('div')[0];
var throttle=function(fn,time){
var timer=null;
return function(){
var arg=arguments;
var context=this;
if(timer){
return false;
}
else{
timer=setTimeout(function(){
clearTimeout(timer);
timer=null;
fn.apply(context,arg);
},time);
}
};
};
window.onmousemove=throttle(function(){
a++;
oDiv.innerText=a+"";
},2000);
</script>
</body>
</html>
这种写法通过判断是否存在正在进行的计时器来决定是否执行函数，存在就结束运行函数，但是那个计时器仍在队列里进行实践一到还会执行，通过运行也能达到节流，也就是间隔固定的时间触发函数，但是我就是不太喜欢这种写法。可能是这种方法没第一种直接吧。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）
函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用. 函数节流的原理挺简单的,估计大家都想到了,那就是定时器.当我触发一个时间时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行,就这样. 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1.
-
JavaScript函数节流和函数防抖之间的区别
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的.反而形成一种视觉效果,就是一张图.就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样. 同理,可以类推到js代码.在一定时间内,代码执行的次数不一定要非常多.达到一定频率就足够了.因为跑得越多,带来的效果也是一样.倒不如,把js代码的执行次数控制在合理的范围.既
-
JavaScript触发onScroll事件的函数节流详解
问题描述 常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A.B.C.D,我们点击A,锚点跳转至A栏目,同时顶部的A按钮高亮:点击B,锚点跳转至B栏目,同时顶部的B按钮高亮:我们在Main组件里面滚动,滚动到B模块时,B按钮高亮.以上是我们经常会在开发中遇到的一个模型.如果是在以前,用jQuery作前端开发的话,实在是太熟悉不过了. 解决方案 主要想谈谈在React组件化开发中的性能优化方法. 我们的页面结构是这样的 <div className={style.main} id
-
JS中setTimeout的巧妙用法前端函数节流
什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等等事情,那么这时候窗口缩放的时候,有可能连续发多个请求,这并不是我们想要的,或者是说我们常见的鼠标移入移出tab切换效果,有时候连续且移动的很快的时候,会有闪烁的效果,这时候我们就可以使用函数节流来操作.大家都知道,DOM的操作会很消耗或影响性能的,如果是说在窗口缩放的时候,为元素绑定大量的dom操作的话,会引发大量的连续计算,比如
-
浅谈JavaScript函数节流
浏览器中某些计算和处理要比其他的昂贵的多.例如,DOM操作比起非DOM交互需要更多的内存和CPU时间.连续尝试进行过多的DOM相关操作可能会导致 浏览器挂起,有时候甚至会崩溃.尤其在IE中使用onresize事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件连续触发.在 onresize事件处理程序内部如果尝试进行DOM操作,其高频率的更改可能会让浏览器崩溃. 函数节流背后的基本思想是,某些代码不可以在没有间断的情况连续重复执行.第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代
-
JavaScript函数节流概念与用法实例详解
本文实例讲述了JavaScript函数节流概念与用法.分享给大家供大家参考,具体如下: 最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的 <!DOCTYPE html> <html> <head> <title>Throttle</title> </head> <body> <script type="text
-
JavaScript 函数节流详解及方法总结
JavaScript 函数节流详解 浏览器一个网页的UI线程只有一个,他同时会处理界面的渲染和页面JavaScript代码的执行(简单扩展一下,浏览器或者JavaScript运行大环境并不是单线程,诸如ajax异步回调.hybrid框架内与native通信.事件队列.CSS运行线程等等都属于多线程环境,不过ES6引入了Promise类来减少了部分异步情况).因此当JavaScript代码运行计算量很大的方法时,就有可能阻塞UI线程,小则导致用户响应卡顿,严重的情况下浏览器会提示页面无响应是否强制
-
JavaScript函数节流的两种写法
最近看了函数节流的相关内容,具体什么是节流我不讨论了,网上很多,这里总结下两个方法,我只认可其中一个.另一个貌似也能达到节流的效果但是感觉不是很正规. 方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数节流</title> <style> div{ font-size:40px;
-
javascript中递归的两种写法
话不多说,请看代码 function addd(n){ if(n==1){ return 1; } return n*addd(n-1); } function add(n){ var num=1; for(var i=1;i<n;i++){ num=num*i; } return num; } 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
-
JavaScript判断变量是否为undefined的两种写法区别
工作中我们经常需要判断某个变量/属性是否为undefined.通常有两种写法 复制代码 代码如下: // 方式1 typeof age === 'undefined'; // 方式2 age === undefined 这两种写法有什么区别吗? 应该使用哪一种呢?看看下面的例子 复制代码 代码如下: typeof age === 'undefined'; // true 标识符 age 没有声明过,输出true. 再看另一个例子 复制代码 代码如下: age === undefined; //
-
C++深浅拷贝和string类的两种写法详解
目录 一.深浅拷贝 二.string类的两种写法 1.传统写法 2.现代写法 总结 一.深浅拷贝 拷贝这个词对于我们来说应该不陌生,比如我们平常的复制和粘贴就是拷贝:但是如果把拷贝这个词放到C++中来说就有一些复杂了,我们先来看一下什么是浅拷贝: 下面用字符串类来模拟实现. class Astring { public: //构造函数 Astring(const char* str = "") { _str = new char[strlen(str) + 1]; strcpy(_st
-
javascript函数命名的三种方式及区别介绍
javascript函数命名的三种方式及区别介绍 第一 复制代码 代码如下: function fn(val1,val2) { alert(val1+val2); } fn(1,2); 第二 复制代码 代码如下: var fn=function() { alert(val1+val2); } fn(1,2); 第三 复制代码 代码如下: var fn=new Function("alert(val1+val2)"); fn(1,2); 上面三种方式逻辑上是等价的,但是还是有点小区别:区
-
ASP.NET MVC中URL地址传参的两种写法
一.url地址传参的第一种写法 1.通过mvc中默认的url地址书写格式:控制器/方法名/参数 2.实例:http://localhost:39270/RequestDemo/Index/88,默认参数名为id所以名称为id. 如果使用其他名称,后台是无法读取的会报错 二.url地址传参的第二种写法 1.使用?加参数名=参数值的写法,如果有多个参数使用&来连接 http://localhost:39270/RequestDemo/Index?id=88&name=%E5%BC%A0%E4%
-
ThinkPHP中Widget扩展的两种写法及调用方法详解
本文实例讲述了ThinkPHP中Widget扩展的两种写法及调用方法.分享给大家供大家参考,具体如下: Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: class ArticleWidget extends Widget { /** * * @param array $data * @return type * 调用方法:{:W('ArticleList