前端项目开发过程中，对一个dom元素动作绑定了事件，但触发dom函数的动作过于频繁从而影响页面性能甚至出现bug的情况，比如：页面滚动scroll事件、浏览器窗口resize事件、输入框搜索input事件等等，这些事件如果在一段时间内不加限制频繁触发必定会导致页面性能变差，尤其是绑定的事件内包含触发页面重绘重排、ajax请求这类操作时，甚至可能出现卡顿、假死、数值错误之类的bug。。。所以为了防止绑定事件多次触发，就需要考虑使用防抖和节流的方案了防抖：事件在指定时间间隔后触发，在时间间隔内如果重复触发事件就重新计时，多用于取多次操作的最后一次操作为有效操作的场景如：搜索框输入搜索、点击切换状态
前端项目开发过程中，对一个dom元素动作绑定了事件，但触发dom函数的动作过于频繁从而影响页面性能甚至出现bug的情况，比如：页面滚动scroll事件、浏览器窗口resize事件、输入框搜索input事件等等，这些事件如果在一段时间内不加限制频繁触发必定会导致页面性能变差，尤其是绑定的事件内包含触发页面重绘重排、ajax请求这类操作时，甚至可能出现卡顿、假死、数值错误之类的bug。。。所以为了防止绑定事件多次触发，就需要考虑使用防抖和节流的方案了防抖：事件在指定时间间隔后触发，在时间间隔内如果重复触发事件就重新计时，多用于取多次操作的最后一次操作为有效操作的场景如：搜索框输入搜索、点击切换状态
防抖概述：在规定时间内只执行一次（执行最后一次）举个例子：电梯关门案例a进入电梯等待5s后就可以上升了在a等待了4s中后b过来那么之前的等待就结束了开始新的等待在b等待了3s后c过来那么之前的等待也结束了开始新的等待....直到最后一次等待结束电梯就上升（实际电梯上升这个操作只执行一次是最后一次） 防抖实现//执行的函数等待的时间functiondebounce(fn,delay){vartimer=null//记录有没有人在等returnfunction(){if(timer)clearTimeout(timer)//有人等上次等待清除timer=setTimeout(fn,delay)/
防抖概述：在规定时间内只执行一次（执行最后一次）举个例子：电梯关门案例a进入电梯等待5s后就可以上升了在a等待了4s中后b过来那么之前的等待就结束了开始新的等待在b等待了3s后c过来那么之前的等待也结束了开始新的等待....直到最后一次等待结束电梯就上升（实际电梯上升这个操作只执行一次是最后一次） 防抖实现//执行的函数等待的时间functiondebounce(fn,delay){vartimer=null//记录有没有人在等returnfunction(){if(timer)clearTimeout(timer)//有人等上次等待清除timer=setTimeout(fn,delay)/
JavaScript防抖和节流是两种常见的性能优化技术，用于减少函数的执行次数。防抖（debounce）是指在一段时间内，如果有多次触发事件，则只执行最后一次事件。节流（throttle）是指在一段时间内，只执行一次事件。例如，你可以使用防抖和节流来优化滚动事件的处理，以避免在页面滚动过程中过于频繁地执行函数：//防抖函数functiondebounce(fn,delay){lettimerreturnfunction(){constcontext=thisconstargs=argumentsclearTimeout(timer)timer=setTimeout(function(){fn.
JavaScript防抖和节流是两种常见的性能优化技术，用于减少函数的执行次数。防抖（debounce）是指在一段时间内，如果有多次触发事件，则只执行最后一次事件。节流（throttle）是指在一段时间内，只执行一次事件。例如，你可以使用防抖和节流来优化滚动事件的处理，以避免在页面滚动过程中过于频繁地执行函数：//防抖函数functiondebounce(fn,delay){lettimerreturnfunction(){constcontext=thisconstargs=argumentsclearTimeout(timer)timer=setTimeout(function(){fn.
一、背景在日常使用中，用户在进行搜索时，没输入一个字就会触发接口请求，这样就会造成网络请求繁忙；用户在下拉滚动调的时候，由于速度过快也会造成频繁触发接口调用。二、防抖防抖，顾名思义，防止抖动。用于将用户的操作行为触发转换为程序行为触发，防止用户操作的结果抖动。一段时间内，事件在我们规定的间隔n秒内多次执行，回调只会执行一次。 1/**2*防抖3*@param{function}fn4*@param{number}delay5*/6functiondebounce(fn,delay=500){7lettimer=null8returnfunction(){9if(timer){10clearTi
一、背景在日常使用中，用户在进行搜索时，没输入一个字就会触发接口请求，这样就会造成网络请求繁忙；用户在下拉滚动调的时候，由于速度过快也会造成频繁触发接口调用。二、防抖防抖，顾名思义，防止抖动。用于将用户的操作行为触发转换为程序行为触发，防止用户操作的结果抖动。一段时间内，事件在我们规定的间隔n秒内多次执行，回调只会执行一次。 1/**2*防抖3*@param{function}fn4*@param{number}delay5*/6functiondebounce(fn,delay=500){7lettimer=null8returnfunction(){9if(timer){10clearTi
定义指令的变化根据vue3文档的描述https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0自定义指令的API已更改为与组件生命周期一致。且binding.expression已移除。也就是说vue2的自定义钩子函数被移除了。我们不能够在使用vue2的自定钩子函数了vue2的自定义钩子函数bind(){}指令绑定到元素后调用。只调用一次。主要用来操作cssinserted(){}元素插入父DOM后调用。有关的DOM操作可以放在这个钩子函数中。update(){}-
定义指令的变化根据vue3文档的描述https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0自定义指令的API已更改为与组件生命周期一致。且binding.expression已移除。也就是说vue2的自定义钩子函数被移除了。我们不能够在使用vue2的自定钩子函数了vue2的自定义钩子函数bind(){}指令绑定到元素后调用。只调用一次。主要用来操作cssinserted(){}元素插入父DOM后调用。有关的DOM操作可以放在这个钩子函数中。update(){}-
