当前位置:网站首页>Anti shake and throttling are easy to understand
Anti shake and throttling are easy to understand
2022-07-06 05:31:00 【Yue Suxi】
Shake proof : adopt setTimeout The way , Within a certain time interval , Change multiple triggers into one trigger
User triggered events too frequently , Only for the last time
// 1. First get dom node
var ipt = document.getElementById("input")
// 2. Define a variable to clear the timer
var t = null
// 3. Triggering event
ipt.oninput = function () {
// 4. Judge whether there is t
if (t !== null) {
// 5. If there is any, clear the timer
clearTimeout(t)
}
// 6. without t Assign the timer to t
t = setTimeout(() => {
console.log(this.value);
}, 1000)
}
That's it , Within one second interval , Multiple clicks will clear the timer , The timer will be executed after the interval exceeds one second
Encapsulate the :
// 1. First get dom node
var ipt = document.getElementById("input")
ipt.oninput = debounce(function () {
console.log(this.value);
}, 1000)
// Encapsulate an anti shake
function debounce(fn, time) {
var t = null
return function () {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
// Need to use call change this Point to , Otherwise this Point to window
fn.call(this)
}, time)
}
}
throttle : Control execution times
Control the execution times of high-frequency events
// throttle
window.onscroll = throttle(function () {
console.log("1");
}, 500)
function throttle(fn, time) {
let flag = true;
return function () {
if (flag) {
setTimeout(() => {
fn()
// After each timer execution flag Change it to true
flag = true
}, time);
}
flag = false
}
}
边栏推荐
- 用StopWatch 统计代码耗时
- Codeforces Round #804 (Div. 2) Editorial(A-B)
- 浅谈镜头滤镜的类型及作用
- ByteDance program yuan teaches you how to brush algorithm questions: I'm not afraid of the interviewer tearing the code
- [leetcode16] the sum of the nearest three numbers (double pointer)
- The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
- Please wait while Jenkins is getting ready to work
- Jvxetable implant j-popup with slot
- Game push image / table /cv/nlp, multi-threaded start
- Three methods of Oracle two table Association update
猜你喜欢
图数据库ONgDB Release v-1.0.3
Safe mode on Windows
F12 solve the problem that web pages cannot be copied
CUDA11.1在线安装
Can the feelings of Xi'an version of "Coca Cola" and Bingfeng beverage rush for IPO continue?
Summary of deep learning tuning tricks
04. 项目博客之日志
ByteDance program yuan teaches you how to brush algorithm questions: I'm not afraid of the interviewer tearing the code
27io stream, byte output stream, OutputStream writes data to file
注释、接续、转义等符号
随机推荐
Modbus协议通信异常
Pix2pix: image to image conversion using conditional countermeasure networks
[QNX hypervisor 2.2 user manual]6.3.3 using shared memory (shmem) virtual devices
[leetcode daily question] number of enclaves
Selective parameters in MATLAB functions
UCF (summer team competition II)
03. Login of development blog project
趋势前沿 | 达摩院语音 AI 最新技术大全
29io stream, byte output stream continue write line feed
Check the useful photo lossless magnification software on Apple computer
无代码六月大事件|2022无代码探索者大会即将召开;AI增强型无代码工具推出...
[leetcode] 18. Sum of four numbers
Fiddler installed the certificate, or prompted that the certificate is invalid
Summary of redis basic knowledge points
Detailed summary of SQL injection
Compilation et connexion de shader dans games202 - webgl (comprendre la direction)
Codeforces Round #804 (Div. 2) Editorial(A-B)
Deep learning -yolov5 introduction to actual combat click data set training
Please wait while Jenkins is getting ready to work
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower