1 .认识节流throttle函数

节流的过程

当事件触发时，会执行这个事件的响应函数；
如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；

节流的应用场景：
- 监听页面的滚动事件；
- 鼠标移动事件；
- 用户频繁点击按钮操作；
- 游戏中的一些设计；

游戏理解: 节流就是英雄CD
生活理解: 坐电梯时每一层的到达时间

2. Underscore实现节流

<!-- //第三方库使用防抖节流 --><input type="text"><script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script><script>const inputEl = document.querySelector('input')let count = 0const inputChange = function (event) {count++console.log(`发送了我们的第${count}次网络请求`, this,event);}// // 防抖只执行一次// inputEl.οninput=_.debounce(inputChange,2000)// 节流固定的时间进行触发inputEl.oninput = _.throttle(inputChange, 2000)

3 手写节流

图解节流的实现

3. 1节流函数的基本实现

<!-- //第三方库使用防抖节流 --><input type="text"><button id="cancel">取消</button><!-- <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script> --><script>const inputEl = document.querySelector('input')let count = 0const inputChange = function (event) {count++console.log(`发送了我们的第${count}次网络请求`, this, event);}// 节流固定的时间进行触发inputEl.oninput = throttle(inputChange, 2000)// 封装节流  :关键在于: 节流阀 以及时间间隔function throttle(callback, times) {let lastTime=0   //初始值//  在接受这两个值时需要返回一个函数const _throttle = function (...args) {// 获取当前时间的秒数const nowTime=new Date().getTime() // 2-(无穷大-0)=-数 执行// 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数const remainTime= times-(nowTime- lastTime) if (remainTime<=0) { callback.call(this,args)// 重新赋值后 times还是2s不调用callback节流阀函数 lastTime=nowTime      //第二次执行的初始时间(保留上次触发的时间)}}return _throttle}

优化

<input type="text"><button id="cancel">取消</button><!-- <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script> --><script>const inputEl = document.querySelector('input')let count = 0const inputChange = function (event) {count++console.log(`发送了我们的第${count}次网络请求`, this, event);}// 节流固定的时间进行触发inputEl.oninput = throttle(inputChange, 2000)// 封装节流  :关键在于: 节流阀 以及时间间隔//1 如果不触发函数则节流阀关闭状态// 当你触发这个函数时先把节流阀关闭 然后在默认的时间间隔中打开function throttle(callback, delaytime) {let state=true   //节流阀打开return function(){if (!state) {  //当节流阀关闭,则直接退出该函数return;         //callback不执行}else{//如果节流阀打开先把节流阀关闭//然后设置时间间隔后在自动打开state = false       setTimeout(() => {callback && callback()state = true}, delaytime)}}}</script>

后期优化
优化一：节流最后一次也可以执行
优化二：优化添加取消功能
优化三：优化返回值问题

JS 封装节流(后期优化)相关推荐

vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
itwangyang - 再次继续卷起来-20 个 JS 封装工具函数
itwangyang - 再次继续卷起来-20 个 JS 封装工具函数前言日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率. ...
python处理svg 平移旋转_d3.js封装文本实现自动换行和旋转平移等功能
我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMulti ...
小程序promise封装post请求_微信小程序 es6-promise.js封装请求与处理异步进程
微信小程序 es6-promise.js封装请求与处理异步进程下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定 ...
原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
使用NW.js封装微信公众号菜单编辑器为桌面应用
开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...
原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
JS日历控件优化(增加时分秒)
JS日历控件优化在今年7月份时候写了一篇关于 "JS日历控件" 的文章 , 当时只支持年月日的日历控件,现在优化如下: 1. 在原基础上支持 yyyy-mm- ...

JS 封装节流(后期优化)

1 .认识节流throttle函数

2. Underscore实现节流

3 手写节流

3. 1节流函数的基本实现

JS 封装节流(后期优化)相关推荐

最新文章

热门文章