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程序设计有所帮助。