网站一键生成手机网站,做网站买那种服务器好,wordpress cookies,电子商务网站建设实训体会在界面触发点击#xff0c;滚动#xff0c;输入校验等事件时#xff0c;如果对事件的触发频率不加以限制#xff0c;会给浏览器增加负担#xff0c;且对用户不友好。防抖和节流就是针对类似情况的解决方案。
防抖
防抖(debounce)#xff1a;当连续触发事件时#xff0…在界面触发点击滚动输入校验等事件时如果对事件的触发频率不加以限制会给浏览器增加负担且对用户不友好。防抖和节流就是针对类似情况的解决方案。
防抖
防抖(debounce)当连续触发事件时一定时间段内没有再触发事件事件处理函数才会执行一次如果设定的时间到来之前又一次触发了事件就重新开始延时。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv点击span classcount0/span次/divbutton classbuttonbutton/buttonscriptlet count 0;function debounce(fn, await) {let timer null;return function(...args) {if(timer) clearTimeout(timer);timer setTimeout(() fn.apply(this, args), await);}}function calCount() {const ele document.getElementsByClassName(count)[0];count;ele.innerHTML count;}const btn document.getElementsByClassName(button)[0];btn.addEventListener(click, debounce(calCount, 1000));/script
/body
/html 节流
节流(throttle)当持续触发事件时保证一定时间段内只调用一次事件处理函数。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv点击span classcount0/span次/divbutton classbuttonbutton/buttonscriptlet count 0;function throttle(fn, await) {let preTime Date.now();return function(...args) {let now Date.now();if(now - preTime await) {fn.apply(this, args);preTime Date.now();}}}function calCount() {const ele document.getElementsByClassName(count)[0];count;ele.innerHTML count;}const btn document.getElementsByClassName(button)[0];btn.addEventListener(click, throttle(calCount, 1000));/script
/body
/html
