什么是节流和防抖？有什么区别？为什么做这个处理？

节流：
规定时间内高频触发事件，在n秒内只会执行一次，这里的主要是稀释了函数执行的频率

实现思路触发函数时都去判断是否有正在执行的延迟函数，有则return
啥都不说先上代码

 function throttle(fn){let canpass = true; //保存一个标记return function() {!canpass&&return; //判断是否可以或者有无延迟函数在处理canpass = false; //将通行证设置为不可通过setTimeout(()=>{ //将处理函数放在延迟函数中执行fn.apply(this,argument);canpass = true; //处理函数执行完毕以后将通行证改为可通行},500)}}function Todeal() { //你需要触发的函数console.log('123456789');}有人可能会问如果传入的处理函数是个异步的该怎么办，我们来修改下throttlefunction throttle(fn){let canpass = true; //保存一个标记return function() {!canpass&&return; //判断是否可以或者有无延迟函数在处理canpass = false; //将通行证设置为不可通过fn.apply(this,argument); //将函数执行放在外面 通行证而后修改setTimeout(()=>{ //将处理函数放在延迟函数中执行canpass = true; //处理函数执行完毕以后将通行证改为可通行},500)同理也可以setTimeout(async function(){await fn.apply(this,argument);canpass = true;},500)}}

防抖
高频触发事件时在n秒内只会执行一次，如果这中间有再次触发执行，就会清除之前的执行重新来过

思路主要是去处理当触发时去终结掉之前的执行，只执行现在的操作

 function stabili(fu) {let timeout = null; //标记一个变量存放定时器return function() {clearTimeout(timeout);timeout = setTimeout(()=> {fu.apply(this, arguments);},500)}}

现在来看对于区别一目了然
防抖在时间内去执行最后一次的触发，而节流是在时间内只执行一次当时间内执行完后可以再次执行下一次
所以具体使用根据当前需求而定选择

什么是节流和防抖？有什么区别？为什么做这个处理？相关推荐

vue防抖和节流是什么_前端节流和防抖的区别
在监听某类事件时,如监听元素滚动或表单input事件时,处理函数在短时间内被频繁调用. 如果处理函数还需要调用后台接口,那么可能上次还没有响应,下一次请求又来了.这样无意中增加了服务器的压力,而且对用 ...
函数节流与防抖的实现
函数节流与函数防抖最近由于处于互联网大厂的秋招季节,因此这些天都在看前端性能优化和算法方面的知识.在性能优化方面,看了网上的一些文章,同时看完了<高性能网站建设指南>和<高性能Ja ...
vue 接口节流_vue防抖节流之v-debounce--throttle使用指南
最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! 使用比较简单,取消利用vue注册事件,采用指令来注册事件,防抖指令v-debounce,节流指令v-debounce, ...
防抖节流_【前端面试】节流与防抖
我们用两张图表示什么是节流和防抖. 防抖节流由图可见,防抖的意思是,当用户在一段时间内连续频繁的试图执行一个函数的时候,只有最后一次,函数被真正的执行.节流的意思是,当用户在某一个时刻执行了一次函 ...
防抖节流_防抖节流与前端性能优化
在我们日常的开发中经常会用到一些容易被反复触发的事件.比如:scroll.resize.鼠标事件(mousemove,mouseover等).键盘事件(keyup.keydown). 频繁触发回调导致 ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
js 函数节流和防抖
js 函数节流和防抖 throttle 节流事件触发到结束后只执行一次. 应用场景触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...
vue 节流throttling防抖debounce
节流和防抖常用与监听滚动事件,移动事件,窗口改变大小事件,输入事件等高频触发事件,当事件处理函数较为复杂时,将导致无法实时响应,降低用户体验度,影响效率,出现页面卡顿,假死等现象. debounce ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...

什么是节流和防抖？有什么区别？为什么做这个处理？

什么是节流和防抖？有什么区别？为什么做这个处理？

什么是节流和防抖？有什么区别？为什么做这个处理？相关推荐

最新文章

热门文章