1.什么是防抖节流防抖:防止重复点击触发事件首先什么是抖动?颤抖就是颤抖!原来点了一次,现在点了3次!不知道老铁脑袋有没有画面感!哈哈哈哈哈哈哈典型的应用就是防止用户重复点击请求数据。代码实现要点:设置一个定时器,通过闭包抓取定时器变量,控制定时器的增减直接添加代码functiondebounce(fn,time){let_arguments=argumentslettimeout=nullreturnfunction(){if(timeout){clearTimeout(timeout)}timeout=setTimeout(()=>{fn.call(this,_arguments)},time);}}节流:在指定的时间间隔内只会执行一个任务。大家都玩过Let'splayFPS游戏(没玩过吗???你会开枪!)道具的射速是固定的,不会因为鼠标点得快而增加。代码实现要点:使用一个布尔变量作为状态判断代码是否需要直接执行。functionthrottle(fn,time){let_arguments=argumentsletcanRun=truereturnfunction(){if(!canRun)returncanRun=falsesetTimeout(()=>{fn.call(this,_arguments)canRun=true},时间);}}2。优雅的使用我在Vue中的应用场景:头像裁剪组件防止滚轮缩放后产生预览图抖动处理就是因为这个原因在Vue组件方法中:{previewImageDebounce:Debounce(this.previewImage,1000),}//ErrorUncaughtTypeError:Cannotreadproperty'previewImage'ofundefined我们需要修改上面的防抖功能(functionthis指向的内容没有问题,我们通过函数名来调用该函数)/**description:Anti-vue中使用的shake函数*paramfnName{String}函数名*paramtime{Number}延迟时间*return:处理后的执行函数*/functionVueDebounce(fnName,time){lettimeout=null;返回函数(){如果(超时){clearTimeout(超时);}timeout=setTimeout(()=>{this[fnName]();},time);};}在Vue组件中使用方法:{/*监听轮子滑动*/Wheel(ev){if(!this.newImage)返回;//判断放大缩小ev.deltaY>0?this.makeScaleChange(1):this.makeScaleChange(0);//预览图像this.previewImageDebounce();},/*预览图(防抖处理后)*/previewImageDebounce:VueDebounce("previewImage",1000),/*预览图*/previewImage(){...}}很优雅,节流不会启动在这里,启动你的小脑袋是没有问题的。跟着我,不要迷路!
