JavaScript函数节流的两种写法
更新时间：2017年04月07日 08:55:08 作者：fantasy525
本文主要介绍了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>
这种写法通过判断是否存在正在进行的计时器来决定是否执行函数，存在就结束运行函数，但是那个计时器仍在队列里进行实践一到还会执行，通过运行也能达到节流，也就是间隔固定的时间触发函数，但是我就是不太喜欢这种写法。可能是这种方法没第一种直接吧。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了微信小程序scroll-view实现左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
“return false”之所以被误用的如此厉害，是因为它看起来像是完成了我们交给它的工作，浏览器不会再将我们重定向到href中的链接，表单也不会被继续提交，但这么做到底有什么不对呢2013-11-11
最近在使用TS+Vue的开发模式，发现项目中大量使用了装饰器，看得我手足无措，今天特意研究一下实现原理，方便自己理解这块知识点，有需要的小伙伴也可以参考一下2022-10-10
本文将介绍下用表格输出1-1000之间的数字同时附有特效，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
Web Component内部有钩子天然支持被篡改时被触发,用来防篡改非常方便,所以本文就将使用Web Component实现防篡改水印,感兴趣的小伙伴可以了解下2023-12-12
一次性给页面上的控件赋值，控件的ID和数据库表字段对应一样，这样就一次性搞定了2010-06-06
bootstrapValidator.min.js表单验证插件
这篇文章主要为大家详细介绍了bootstrapValidator.min.js表单验证插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家全面解析Bootstrap布局组件应用，几乎对所有Bootstrap布局组件示例进行了解析，感兴趣的小伙伴们可以参考一下2016-02-02
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
js获得指定控件光标的坐标，兼容IE,Chrome,火狐等多种主流浏览器，实现代码及调用代码如下，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-05-05
本文给大家分享2个javascript实现简单的进度条，一个是个人制作一个是网友实现的，都很不错，这里推荐给大家。2015-07-07
最新评论