建网站公司成都,我的网站为什么打不开怎么回事,韩国u17出线,网站建设优化汕头文章目录 一、防抖 #xff08;多次触发 只执行最后一次#xff09;二、节流 #xff08;规定时间内 只触发一次#xff09;三、防抖和节流的使用场景【1】防抖#xff08;debounce#xff09;【2】节流#xff08;throttle#xff09; 一、防抖 #xff08;多次触发 … 文章目录 一、防抖 多次触发 只执行最后一次二、节流 规定时间内 只触发一次三、防抖和节流的使用场景【1】防抖debounce【2】节流throttle 一、防抖 多次触发 只执行最后一次 作用 高频率触发的事件,在指定的单位时间内只响应最后一次如果在指定的时间内再次触发则重新计算时间 防抖类似于英雄联盟回城6秒如果回城中被打断再次回城需要再等6秒 bodyinput typetext idinpscript// 1.封装防抖函数function debounce(fn, time) {// 4.创建一个标记用来存放定时器的返回值let timeout null;return function () {// 5.每当用户触发input事件 把前一个 setTimeout 清楚掉clearTimeout(timeout);// 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话就不会执行 setTimeout里面的内容timeout setTimeout(() {// 7.这里进行防抖的内容fn();}, time);};}// 2.获取inpt元素var inp document.getElementById(inp);// 8. 测试防抖临时使用的函数function sayHi() {console.log(防抖成功);}// 3.给inp绑定input事件 调用封装的防抖函数 传入要执行的内容与间隔事件 inp.addEventListener(input, debounce(sayHi, 5000)); /script
/body二、节流 规定时间内 只触发一次 作用 高频率触发的事件,在指定的单位时间内只响应第一次 节流类似于英雄联盟里的英雄平A 一定是内点击多次只进行攻击一次 script// 1.封装节流函数function throttle(fn, time) {//3. 通过闭包保存一个 节流阀 默认为falselet temp false;return function () {//8.触发事件被调用 判断节流阀 是否为true 如果为true就直接trurn出去不做任何操作if (temp) {return;} else {//4. 如果节流阀为false 立即将节流阀设置为truetemp true; //节流阀设置为true//5. 开启定时器setTimeout(() {//6. 将外部传入的函数的执行放在setTimeout中fn.apply(this, arguments);//7. 最后在setTimeout执行完毕后再把标记节流阀为false(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true在开头被return掉temp false;}, time);}};}function sayHi(e) {// 打印当前 document 的宽高console.log(e.target.innerWidth, e.target.innerHeight);}// 2.绑定事件绑定时就调用节流函数 // 敲黑板 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数window.addEventListener(resize, throttle(sayHi, 2000));/script三、防抖和节流的使用场景
【1】防抖debounce 1.search搜索时用户在不断输入值时用防抖来节约请求资源。 【2】节流throttle 1.鼠标不断点击触发mousedown(单位时间内只触发一次) 2.监听滚动事件比如是否滑到底部自动加载更多用throttle来判断
