一、函数防抖（Debouncing）

1、基本概念

在触发事件后的规定时间内只能执行一次，如果在规定时间内又触发了该事件。则会重新开始计算规定时间；

2、算法思想

（1）首先定义一个函数，函数进入页面立即执行一次，且永远执行最新的一次；

（2）返回一个匿名函数；

（3）在匿名函数里使用计时器setTimeout设置规定时间；

（4）在使用clearTimeout来清除上一次的函数调用；

（5）在事件中调用该函数；

（6）必须返回函数，因为事件只能调用函数；

3、代码实现

//功能：防抖函数 function debounce(callback,time = 300){ let t; //返回一个匿名函数 return function(){ clearTimeout(t);//清除定时器 t = setTimeout(callback,time);//设置定时器 } } //在onscroll事件中调用防抖函数 window.onscroll = debounce(function(){ console.log("调用了1次"); },500); 

onscroll事件为滚动条事件  属于window对象

callback为回调函数

4、使用场景

防抖函数就是为了防止用户进行一些频繁的点击事件、输入文字或者滚动事件时，对应绑定的事件发生多次的场景，这些事件的触发频率很高，不做限制的话可能一秒执行几十次甚至几百次，会造成不必要的浪费。

下面用一个在网页中经常遇到的回到顶部案例说明

代码：

效果：

分析：大大减少了函数的调用次数，减少了对计算机资源的浪费等等；

二、函数节流（Throlle）

1、基本概念

函数节流和函数防抖恰好相反，规定在一个单位时间内，只能调用一次函数，如果在这个规定时间内对此调用函数，只能有一次被调用，相当于子啊这个规定时间内永远只会执行第一次。

2、算法思想

（1）获取刚进入页面的时间戳；

（2）获取事件开始发生的时间戳；

（3）如果相隔的时间大于设定的时间，则继续下一次调用；

（4）更新上一次调用的时间，永远执行第一次；

3、代码实现

 //功能：函数节流 永远执行第一次 function throlle(callback,time){ let lasttime = new Date().getTime();//获取刚进入页面时的时间戳 return function(){ let nowtime = new Date().getTime();//获取滚动条开始滑动的时间戳 if (nowtime - lasttime > time){//如果时间间隔大于设定的时间 则继续下一次调用 callback(); lasttime = nowtime;//更新上一次的时间戳 } } } window.onscroll = throlle(function(){ console.log("调用了1次"); },500); 

getTime()：用来获取当前的时间戳

4、使用场景

函数节流可以运用于所有的数据请求、按钮和下拉刷新等等。

用一个登录按钮的使用的案例来说明

代码：

后台管理系统



登录

效果：

分析：在规定时间不允许在点击登录按钮 超过规定时间以后才能继续点击，进行下一次登录；

到此这篇关于JavaScript函数防抖与函数节流的定义及使用详解的文章就介绍到这了,更多相关JavaScript函数防抖 节流内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！