保定专业做网站公司,建站超市代理,wordpress的豆瓣插件,wordpress 什么编辑器什么是节流
节流是限制事件触发的频率#xff0c;当持续触发事件时#xff0c;在一定时间内只执行一次事件#xff0c;这个效果跟英雄联盟里的闪现技能释放差不多。
函数防抖关注一定时间连续触发的事件只在最后执行一次#xff0c;而函数节流侧重于一段时间内只执行一次…什么是节流
节流是限制事件触发的频率当持续触发事件时在一定时间内只执行一次事件这个效果跟英雄联盟里的闪现技能释放差不多。
函数防抖关注一定时间连续触发的事件只在最后执行一次而函数节流侧重于一段时间内只执行一次。
间隔一段时间执行一次回调的场景有
滚动加载加载更多或滚到底部监听谷歌搜索框搜索联想功能高频点击提交表单重复提交
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title节流/titlescript srchttps://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.6/underscore-min.js/script
/headbodydiv普通输入框input classinput1 //divdiv节流输入框input classinput2 //divscript// 普通const inputEl1 document.querySelector(.input1);let counter1 1;inputEl1.oninput function () {console.log(发送网络请求${counter1}, this.value);};// 节流处理过的const inputEl2 document.querySelector(.input2);let counter2 1;inputEl2.oninput _.throttle(function () {console.log(节流处理发送网络请求${counter2}, this.value);}, 1000);/script
/body/html手写 throttle
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title手写节流/titlescript// 时间戳实现节流function kaimoThrottle(fn, delay) {let startTime 0;let _throttle function (...args) {let now new Date().getTime();let waitTime delay - (now - startTime);if (waitTime 0) {fn.apply(this, args);startTime now;}}return _throttle;}// setTimeout 实现节流function kaimoThrottle2(fn, delay) {let timer null;let _throttle function (...args) {// 如果 timer 不为 null说明上一个定时器还未执行则直接返回if (timer) {return;}// 开启新的一个定时器timer setTimeout(() {// this 和参数绑定fn.apply(this, args);// 函数执行完之后将timer置为nulltimer null;}, delay);};return _throttle;}/script
/headbodydiv节流输入框input classinput //divscriptconst inputEl document.querySelector(.input);let counter 1;inputEl.oninput kaimoThrottle2(function (e) {console.log(手写节流发送网络请求${counter}, this, this.value);console.log(e);}, 1000);/script
/body/html
