节流函数(throttle)的原理

throttle节流函数，就是一个函数调用的频率控制器；

var safe = true;
function throttle() {if (safe) {lazyLoad();safe = false;setTimeout(function() {safe = true;}, 500);}}

如下代码，safe每隔500ms才会为true，所以srollFn最快500ms执行一次。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body style="height:2000px">
<script>/*throttle节流函数，就是一个函数调用的频率控制器；如下代码，safe每隔500ms才会为true，所以srollFn最快500ms执行一次。*/var num = 0;function lazyLoad() {num++;console.log(num);}var safe = true;function throttle() {if (safe) {lazyLoad();safe = false;setTimeout(function () {safe = true;}, 1000);}}window.onscroll = throttle;</script>
</body>
</html>

转载于:https://www.cnblogs.com/aredleave/p/7573157.html

节流函数(throttle)的原理相关推荐

小程序开发中使用节流函数throttle的正确方式
问题以前在开发小程序项目时,经常遇到节流需求,然后研究了好久都没成功.今天又遇到了,终于被我弄成功了.原来是使用方法错误,终究还是Javascript的基本功差导致的. 使用的小程序开发框架是mpv ...
深入浅出节流函数 throttle
引言上一节我们详细聊了聊高阶函数之柯里化,通过介绍其定义和三种柯里化应用,并在最后实现了一个通用的 currying 函数.这一小节会继续之前的篇幅聊聊函数节流 throttle,给出这种高阶函数的 ...
简单的节流函数throttle
在实际项目中,总会遇到一些函数频繁调用的情况,比如window.resize,mouseover,上传进度类似的触发频率比较高的函数,造成很大的性能损耗,这里可以使用节流函数来进行性能优化,主要是限制 ...
实现js节流函数throttle
两个timer实现js节流函数用两个timer做一个函数调用节流器,不需要更多的逻辑,保证第一次调用和每间隔timeout时间后被触发和最后一次的调用被触发: // js 节流函数实现 functi ...
节流函数-throttle
1. 功能 throttle 和防抖一样都是减少高频率执行代码的执行频率. 2.使用场景 oninput onresize onscroll onmousemove onmousehover 等等 3 ...
JavaScript 节流函数 Throttle 详解
在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动 (mousemove).也就是说用户在触发这些 ...
throttle节流函数
深入浅出节流函数 throttle 函数节流指的是某个函数在一定时间间隔内(例如 3 秒)只执行一次,在这 3 秒内无视后来产生的函数调用请求,也不会延长时间间隔.3 秒间隔结束后第一次遇到新的函数 ...
详解防抖函数（debounce）和节流函数（throttle）
函数防抖(debounce) 函数防抖,就是指触发事件后,在 n 秒后只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数的执行时间. 简单的说,当一个动作连续触发,只执行最后一次. 列举: ...
vue中如何使用节流（throttle）函数
JavaScript 中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则我们一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...

节流函数(throttle)的原理

节流函数(throttle)的原理相关推荐

最新文章

热门文章