官网的网站建设,商机互联网站建设,网站建设基础课程,Linux做视频网站网速均衡一
防抖#xff1a;单位时间内#xff0c;频繁触发事件#xff0c;只执行最后一次 场景#xff1a;搜索框搜索输入#xff08;利用定时器#xff0c;每次触发先清掉以前的定时器#xff0c;从新开始#xff09;
节流#xff1a;单位时间内#xff0c;频繁触发事件单位时间内频繁触发事件只执行最后一次 场景搜索框搜索输入利用定时器每次触发先清掉以前的定时器从新开始
节流单位时间内频繁触发事件只执行一次 场景高频事件 快速点击鼠标滑动、resize事件、scroll事件利用定时器等定时器执行完毕才开启定时器不用打断 一般用lodash库利用里面的debounce防抖和throttle(节流)来做 二 【前端面试题防抖与节流二】 https://www.bilibili.com/video/BV1ig411u7LG/?share_sourcecopy_webvd_sourcec1fe9c75396fdc6f65b56d15f5eb00b3 防抖 防抖用户触发事件过于频繁只需要最后一次事件的操作 案例一输入框触发过于频繁
只想要暴富两字前面哪些过程不想要把它输出来!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodyinput typetextscriptlet inp document.querySelector(input);inp.oninput function(){console.log(this.value);}/script/body
/html
案例二用定时器解决触发频繁问题
差不多解决了可以在调整一下时间更完美!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodyinput typetextscript// 防抖方法一 好烦啊我也不知道是哪些部分不懂明明拆开我全晓得烦躁let inp document.querySelector(input);// t代表的是用户触发的次数let t null;inp.oninput function(){if(t ! null){clearTimeout(t);}t setTimeout((){console.log(this.value);},500)}/script/body
/html
案例三用debounce解决触发频繁问题 案例二的代码据说是一团垃圾因为业务逻辑和什么混在一起了所以下面用闭包封的更好些 !DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodyinput typetextscript// 防抖方法二 debouncelet inp document.querySelector(input);let t null;inp.oninput debounce(function(){console.log(this.value);},500)function debounce(fn,delay){return function(){if(t ! null){clearTimeout(t);}t setTimeout((){fn.call(this);},delay)}}/script/body
/html
节流 节流就是控制执行次数 案例一执行次数过多 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlestylebody{height:800px;}/style/headbodyscriptwindow.onscroll function(){console.log(123);}/script/body
/html
案例二定时器节流 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlestylebody{height:800px;}/style/headbodyscript// 节流方法一 定时器let flag true;window.onscroll function(){if(flag){setTimeout((){console.log(111);flag true;},500)}flag false;}/script/body
/html
案例三throttle节流 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlestylebody{height:800px;}/style/headbodyscript// 节流方法二throttlelet flag true;window.onscroll throttle(function(){console.log(111);},500)function throttle(fn,delay){let flag true;return function(){if(flag){setTimeout((){fn.call(this)flag true},delay)}flag false;}}/script/body
/html 三 【手写函数防抖和节流】 https://www.bilibili.com/video/BV1pQ4y1M71e/?p3share_sourcecopy_webvd_sourcec1fe9c75396fdc6f65b56d15f5eb00b3
