淄博网站网站建设,网站制作需要哪些软件有哪些,广告制作公司转型,体育局网站建设防抖 (debounce) 所谓防抖#xff0c;就是指触发事件后在 n 秒内函数只能执行一次#xff0c;如果在 n 秒内又触发了事件#xff0c;则会重新计算函数执行时间。 ps: 重置普攻#xff0c;百度翻译要输完停止一定时间后才翻译。 没有防抖和节流的缺点#xff1a;
函数触发…防抖 (debounce) 所谓防抖就是指触发事件后在 n 秒内函数只能执行一次如果在 n 秒内又触发了事件则会重新计算函数执行时间。 ps: 重置普攻百度翻译要输完停止一定时间后才翻译。 没有防抖和节流的缺点
函数触发频率过高导致的响应速度跟不上触发频率出现延迟假死或卡顿的现象。浪费请求资源
策略 当事件被触发时设定一个周期延时执行动作若周期又被触发则重新设定周期直到周期结束执行动作。 在后期有拓展了前缘防抖函数即执行动作在前设定延迟周期在后周期内有事件被触发不执行动作且周期重新设定。
案例停止输入后将输入的字符串翻转
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title防抖 /titlestyle* {margin: 0;padding: 0;}html,body {height: 100%;}body {display: flex;justify-content: center;align-items: center;}.container {display: flex;justify-content: space-around;width: 800px;height: 400px;padding: 20px;box-shadow: 0 0 8px #222;}.container div {width: 350px;height: 380px;padding: 8px;border: 1px solid #ccc;font-size: 18px;line-height: 20px;word-break: break-all;}.input-box {color: #368;outline: none;}.show-box {color: orange;}/style
/headbodydiv classcontainerdiv classinput-box contenteditable/divdiv classshow-box/div/divscriptvar oInput document.querySelector(.input-box)var oShow document.querySelector(.show-box)var timeOut;//这个timeOut必须是全局变量
oInput.addEventListener(input, function () {timeOut clearTimeout(timeOut);timeOut setTimeout(function () {oShow.innerText translate(oInput.innerText);}, 500);
}, false);function translate(str) {return str.split().reverse().join();
}/script
/body/html节流 (throttling) 所谓节流就是指连续触发事件但是在 n 秒中只执行一次函数。**节流会稀释函数的执行频率。 对于节流有多种方式可以实现 时间戳 定时器 束流等。 ps : 技能CD 应用场景 鼠标连续不断地触发某事件如点击只在单位时间内只触发一次 在页面的无限加载场景下需要用户在滚动页面时每隔一段时间发一次 ajax 请求而不是在用户停下滚动页面操作时才去请求数据 监听滚动事件比如是否滑到底部自动加载更多用throttle来判断
策略 固定周期内只执行一次动作若没有新事件触发不执行。周期结束后又有事件触发开始新的周期。 特点 连续高频触发事件时动作会被定期执行响应平滑
计时器版
var oCon $(.container);
var num 0;
var valid true;
oCon.addEventListener(mousemove, function () {if (!valid) {return false;}valid false;setTimeout(function () {count();valid true;}, 500);
}, false);function count() {oCon.innerText num;
}
时间戳版
var oCon $(.container);
var num 0;
var time Date.now();
oCon.addEventListener(mousemove, function () {if (Date.now() - time 600) {return false;}time Date.now();count();
}, false);function count() {oCon.innerText num;
}
束流器版
一般用在游戏中元素以不同频率运动
这样做的好处是可以把所有元素用同一个定时器来管理用速差来做不同频率的运动
var oCon $(.container);
var num 0;
var time 0;
oCon.addEventListener(mousemove, function () {time;if (time % 30 ! 0) {return false;}console.log(time)count();
}, false);function count() {oCon.innerText num;
}案例同一个定时器中 红色小球运动两次 蓝色小球运动一次 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title定时器运动 /titlestyle* {margin: 0;padding: 0;}html,body {height: 100%;}div {position: absolute;width: 100px;height: 100px;border-radius: 50%;}.red {top: 100px;background-color: red;}.blue {background-color: blue;}/style
/headbodydiv classred/divdiv classblue/divscript srcjs/common.js/scriptscriptvar oRed $(.red);var oBlue $(.blue);var speed 0;var counter 0;var time;time setInterval(function () {speed .1;counter;oRed.style.left oRed.offsetLeft speed px;if (counter % 2 0) {oBlue.style.left oBlue.offsetLeft speed px;}}, 1000 / 30);/script
/body/html
