当前位置:首页 > 日记 > 正文

Javascript函数节流的概念及其用法的详细说明

Javascript函数节流的概念及其用法的详细说明
本文介绍了Javascript函数节流的概念和用法,供大家参考,如下:

最近,在制作网页时有一个需求,也就是说,当改变浏览器窗口时,我们需要更改页面元素的大小,所以自然地考虑窗口的大小调整事件,所以这就是我写的。
节流阀
n=0;
功能resizehandler(){
console.log(新的日期()GetTime()));
console.log(+ +);
}
onresize = resizehandler窗口;

功能完成了,但当我拖动浏览器窗口的大小时,我看了一下控制台。
是的,一个简单的拖放让我resizehandler()方法被执行52次,这不是我想要的,我真的resizehandler()方法的代码是非常复杂的,并将使用Ajax向服务器发送请求,如果一个简单的改变窗口大小的嘴打了52次哦

节流

事实上,我的意图只是在窗口大小调整之后进行一些调整,但是窗口调整大小事件在调整结束后不会触发。我不知道确切的频率,但它要求直到窗口大小不再变化。事实上,一个类似的机制和鼠标MouseMove反复在短时间内触发。

在Javascript高级编程中,针对这个问题有功能性的节流功能。
函数节流(方法,上下文){
ClearTimeout(方法。TID);
方法。TID = setTimeout(){()函数(
method.call(背景);
},500);
}

原理很简单。我们使用定时器使函数执行延迟500毫秒。如果在另一个500毫秒内有一个函数,则最后一个调用被删除。这一次是在500毫秒后执行的,它是往复的,所以我的代码可以更改为
n=0;
功能resizehandler(){
console.log(新的日期()GetTime()));
console.log(+ +);
}
函数节流(方法,上下文){
ClearTimeout(方法。TID);
方法。TID = setTimeout(){()函数(
method.call(背景);
},500);
}
窗口。onresize =函数(){
节流阀(resizehandler,窗口);
};
试试看。它只做过一次。
另一种方法

在因特网上有一个功能性的节流方案,它已经完成了。
功能节流(方法,延迟){
var定时器= null;
返回函数(){
VaR上下文=,=参数args;
ClearTimeout(定时器);
定时器= setTimeout(){()函数(
method.apply(上下文,args);
},延迟);
}
}

试试看,效果一样
n=0;
功能resizehandler(){
console.log(新的日期()GetTime()));
console.log(+ +);
}
功能节流(方法,延迟){
var定时器= null;
返回函数(){
VaR上下文=,=参数args;
ClearTimeout(定时器);
定时器= setTimeout(){()函数(
method.apply(上下文,args);
},延迟);
}
}
窗口。onresize =节流(resizehandler,500); / /返回功能因为没有包装功能的处理

比较

这两种方法是使用setTimeout,它不同于第二方法添加功能延迟执行时间。这很容易在第一个计划中有这个函数,加上一个参数。

但是第一个方案节省TID作为一个变量的函数,和第二创建一个闭包来存储它。我认为差距很小,我喜欢第一个,简单有效。

新的需求

一天的时间去做类似的事情,像百度首页输入自动提示一样的东西,我把文本KeyUp事件,自动提示每一次的关键,但他们不想建议如此频繁,所以我用上面的方法,但悲剧,只有500毫秒,停止输入提示输入过程中没有提示。看代码,这是真的,只要用户输入,点击在500毫秒内键盘,功能将继续被推迟,会提示这样才停止,这是毫无意义的。

基于函数节流的时间间隔是否可以执行一次

小的变化

在网上搜索,我们可以根据第二种写作方法进行修改:第一种是扩展多个变量,感觉有点不好),必须添加一个参数作为固定的间隔。
功能节流(方法,延迟,持续时间){
var定时器= NULL,开始=新日期();
返回函数(){
VaR上下文=,=参数args,电流=新的日期();;
ClearTimeout(定时器);
如果(当前开始>持续时间){
method.apply(上下文,args);
开始=当前;
其他{ }
定时器= setTimeout(){()函数(
method.apply(上下文,args);
},延迟);
}
}
}

这一次我们判断每次有多长时间,如果超过规定时间,我们就做一次,并用例子来检验结果。
窗口。onresize =节流(resizehandler,100200);

既没有频繁执行也没有最终执行。

更多有关Javascript相关内容的读者可以看到特别站:Javascript切换效果和技巧摘要

希望本文能对javascript程序设计有所帮助。

相关文章

AI只是从破壳里画一个小黄继。

AI只是从破壳里画一个小黄继。

是从,画一,小黄,破壳,电脑软件,今天我们分享一个AI简单孵出小鸡教程的方法,基础比较,适合初学者学习,大家看看吧! 步 在Ai软件中,新建了一个新的800×800文档,选择一个椭圆工具来绘制一个椭圆图,如图所示。 Then select the pen tool, tick out …

WPS如何设置选项按钮

WPS如何设置选项按钮

选项,如何设置,按钮,电脑软件,WPS,你知道如何在WPS文本中设置下拉框吗对于一个通常不使用WPS的朋友,也许你并不十分了解它。让我们告诉你萧边建立WPS下拉选项框的方式,并希望信息由萧边编写的可以帮助你。 WPS文本下拉框的设置方法 1。要建…

DetailedhowtouseAxioscrossdomain

DetailedhowtouseAxioscrossdomain

电脑软件,DetailedhowtouseAxioscrossdomainaccessdatainVue,在最近的一个项目需要使用可信,所以赶上这个Axios到底是什么。这是一个非常时髦的资源替代,官方网站说,Axios用于未来。 Vue公司资源难以维持。这Axios如何使用,互联网搜索了很多,基…

WPS文本工具栏是如何用中文设置的

WPS文本工具栏是如何用中文设置的

中文,文本,工具栏,设置,如何用,当我们使用WPS表格,可能不小心将英语工具栏,如果我们想中国的工具栏,我应该怎么做不用担心下次让萧边告诉你如何把一个WPS的中文文本工具栏设置。 将WPS文本工具栏设置为中文的方法 计算机上的WPS软件已卸载,WP…

使用复制处理程序复制文件

使用复制处理程序复制文件

复制文件,处理程序,电脑软件,复制处理工具是一个高度智能的文件复制工具。虽然它的拷贝传输速度不是很快,但它的特性也非常明显。它可以自动监测标签内容。当开放运行的工具,它会自动隐藏在后台运行的默认实现的工具和没有Windows系统的整合,…

如何让PPT2010制作教程拉PPT2010制

如何让PPT2010制作教程拉PPT2010制

电子相册,制作教程,电脑软件,现在许多人正在使用PPT2010制作电子相册,如何制作电子相册的拉动效应,电子相册图片表现更生动,下面是一个小整理PPT2010制作抽拉式电子相册的制作方法,供大家参考。 用PPT2010制作制作电子相册的方法拉 打开Power…

PS图象处理软件做出细致的白色透明

PS图象处理软件做出细致的白色透明

图标,透明,图象,处理软件,细致,你对应用程序的图标是怎么做的感到好奇吗其实我们也可以自己动手做溜溜球,这不仅充满乐趣,而且让你的电脑与众不同。接下来,我将学会和萧边做ICO图标。 步 1、首先,我们需要在互联网上找到一些ICO图标的材料,试图…

MySQL批量删除大量数据

MySQL批量删除大量数据

数据,批量删除,电脑软件,MySQL,MySQL批量删除大量数据 假设有一个表(系统日志)有1000万条记录,包括所有的记录需要删除statusid = 1的业务不停,有近600万个,删除系统日志,statusid = 1直接执行会删除失败,因为锁等待超时超过误差。 因为这个句子所…

如何批量发送微信的聊天记录

如何批量发送微信的聊天记录

聊天记录,批量,电脑软件,当你想提出一个朋友的微信聊天的人,如何把这批其实,聊天的聊天记录给其他人。但是,所有的聊天记录不能转发给其他人。这是用手向前的聊天记录太麻烦。所以,我们怎么有一批微信聊天记录,看看这个教程! 微信聊天记录如何转…

使用图层样式创建美丽的黄金笔画

使用图层样式创建美丽的黄金笔画

黄金,笔画,图层,样式,美丽,本教程的字体设计部门要求与图层样式复杂得多,样式的使用也较多,设置参数必须小心,一些参数需要根据文本的实际大小进行调整。 最终效果 1,打开背景材料,如下图所示。 2,我们现在直接做单词,然后输入我们要做的字母。 …

新的数据结构weaksetES6使用详细的

新的数据结构weaksetES6使用详细的

数据结构,详细,电脑软件,weakset,类似,也是一组元素不重复,不同的是,在weakset元素必须是对象,而不是其他类型。 特点uff1a 1。元素必须是对象。 添加数字类型的元素。 const WS =新weakset() Ws.add(1) 结果是一种错误。 TypeError:用弱集值无效…

对无法在mysql5.7.18安装找到切入

对无法在mysql5.7.18安装找到切入

解决方案,安装,电脑软件,在mysql5.7.18安装存在的主要问题,不可位于程序输入点fesetround和动态链接库msvcr120.dll,和网友给出了解决方案 问题的截图如下: 解决方案1: 你可以使用MySQL的绿色解压安装。 你也可以使用wnmp或XAMPP,这样一个集成…