福州优化网站建设,无锡网站建设哪家好,手机网站制作哪家好,域名net表示什么网站前端防抖和节流
概述
防抖#xff1a; 防止抖动#xff0c;个人字面理解此处防的不是页面的抖动#xff0c;而是用户手抖。为了防止用户快速且频繁的触发事件而导致多次执行事件函数#xff0c;这样的场景有很多#xff0c;比如监听滚动、鼠标移动事件onmousemove、频繁…前端防抖和节流
概述
防抖 防止抖动个人字面理解此处防的不是页面的抖动而是用户手抖。为了防止用户快速且频繁的触发事件而导致多次执行事件函数这样的场景有很多比如监听滚动、鼠标移动事件onmousemove、频繁点击表单的提交按钮等等。 节流 节约流量为了节约流量页面在一个时间周期内只触发一次动作。所以节流的目的时稀释函数的执行频率。 防抖动和节流本质是不一样的。防抖动是多次触发但只会执行一次节流是多次触发但周期内只会执行一次
防抖实现
htmlbodyinput typebutton id btn value提交 /ul idresult/ulscriptvar resultText const print (text) {let item document.createElement(li)item.innerText textdocument.getElementById(result).appendChild(item)}// 创建debounce防抖函数const debounce (func, wait) {let timeout null;// 此时func的this指向是window// 如果func内部想修改this指向当前函数的调用者就必须存储this之后借助apply修改func的this指向。// 因此借助闭包缓存调用者的thislet context null; let args null;// 通过定时器延迟执行事件函数let run () {timeout setTimeout(() {// 通过 apply 修改func的this指向并让func获取真正的事件函数即防抖函数return出来的函数的参数之后执行funcfunc.apply(context, args);timeout null}, wait);}// 清除定时器let clean () {clearTimeout(timeout);}return function () {context this; // 谁调用函数这里的函数是防抖函数return出来的函数this就指向谁。args arguments; // arguments 是一个对应于传递给函数的参数的类数组对象可以获取函数的参数这里的函数是防抖函数return出来的函数。console.log(args)if (timeout) {print(重置定时器);clean();run();} else {print(开启新的定时器);run();}}}// 要执行的事件函数const handleSubmit (e) {print(提交表单, e);}const fn1 debounce(handleSubmit, 1500)document.getElementById(btn).addEventListener(click, fn1)/script
/body/html节流实现
htmlbodyinput typebutton idbtn value提交 /ul idresult/ulscriptvar resultText const print (text) {let item document.createElement(li)item.innerText textdocument.getElementById(result).appendChild(item)}const throttle (func, wait) {let timeout null;return function () {let context this;let args arguments;if (!timeout) {timeout setTimeout(() {timeout null;func.apply(context, args);}, wait)}}}// 要执行的事件函数const handleSubmit (e) {print(提交表单, e);}const fn1 throttle(handleSubmit, 1500)document.getElementById(btn).addEventListener(click, fn1)/script
/body/html
