javaScript 函数节流
本文作者：IMWeb jaychen 原文出处：IMWeb社区 未经同意，禁止转载
什么是javascript函数节流？从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数，通过设置定时器，使其在执行后间隔一段时间，才进行下一次的执行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。
函数节流的经典应用场景：onresize，scroll，mousemove,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器，通过设置缓冲时间，在第一次调用时，创建定时器，并在定时时间结束调用。第二次调用时，会清除前一个定时器并设置新的定时器。如果这时前一个定时器暂未执行，则将其替换为新的定时器。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用。我们看一个简单实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数节流</title>
<style>
body{
height: 2000px;
}
</style>
</head>
<body>
<script>
window.onscroll = function (argument) {
console.log("函数调用");
}
</script>
</body>
</html>未实现函数节流时运行截图：
通过上图我们可以发现，我们滚动页面时，频繁触发了多次的函数调用，如果函数调用中涉及到了dom操作或者接口请求的话，那将是一个恶梦。
下面通过加入函数节流的方法：
<script>
window.onscroll = function(){
console.log("scroll滑动");
throttle(count);
}
function count(){
console.log("函数调用");
}
function throttle(method, context){
clearTimeout(method.tId)
method.tId = setTimeout(function(){
method.call(context);
}, 300);
}
</script>效果如下图，只有在停止滑动后，定时结束才执行函数处理逻辑。
但是可能会说，如果我想在滑动的时候，隔一段时间，不管有没停止滑动，都要执行处理逻辑，而不是像上面一样要等到停止之后才调用，该如何实现呢？
var time = +new Date();
function count(){
console.log("函数调用:" + (+new Date()-time));
}
/**
* [@param](/user/param) {Function}
* [@param](/user/param) {[Function]} 延时调用函数
* [@param](/user/param) {[Number]} 延迟多长时间
* [@return](/user/return) {[Number]} 至少多长时间触发一次
*/
var throttle = function(fn, delay, mustRun){
var timer = null,
previous = null;
return function(){
var now = +new Date(),
context = this,
args = arguments;
if (!previous ) previous = now;
var remaining = now - previous;
if(mustRun && remaining >= mustRun){
fn.apply(context, args);
previous = now;
}else{
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
}
}
}
window.onscroll = throttle(count, 500, 1000);
这样我们就可以达到上面所要的效果，适合于需要频繁调用，但又在一定的时间内必须要执行逻辑的场景。
总结： 巧用函数节流方式能够显著得提高页面性能以及交互体验，欢迎大家一起探讨。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读