js_节流
一.背景
如果在限定时间段内,不断触发滚动事件(比如某个用户闲着无 聊,按住滚动不断的拖来拖去),只要不停止触发,理论上就永远 不会输出当前距离顶部的距离
但是如果产品同学的期望处理方案是:即使用户不断拖动滚动条, 也能在某个时间间隔之后给出反馈呢?
其实很简单:我们可以设计一种类似控制阀门一样定期开放的函 数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这 段时间后再重新激活(类似于技能冷却时间)
效果:如果短时间内大量触发同一事件,那么在函数执行一次之 后,该函数在指定的时间期限内不再工作,直至过了这段时间才重 新生效。
常见业务:
-
搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内 容),或者实现输入间隔大于某个值(如500ms),就当做用户输入完成,然后开始搜索,具体使 用哪种方案要看业务需求
-
页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染(这 种情形一般是使用防抖,因为只需要判断最后一次的变化情况)
二.实例
滚动条定期输出高度:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h2 { height: 200px; } </style> </head> <body> <h2>哈哈哈</h2> <h2>哈哈哈</h2> <h2>哈哈哈</h2> <h2>哈哈哈</h2> <h2>哈哈哈</h2> <h2>哈哈哈</h2> <script> function scrollHandle() { var scrollTop = document.documentElement.scrollTop; console.log(scrollTop); } function throttle(fn,delay) { var flag = true; return function() { if (!flag) return false; flag = false; setTimeout(function(){ fn(); flag = true; },delay) } } window.onscroll = throttle(scrollHandle,3000); </script> </body> </html>