当前位置:网站首页>Anti shake and throttling
Anti shake and throttling
2022-07-05 15:21:00 【Shepherd Wolf】
scene ( Frequently triggered events )
Page scroll bar scroll event , Web window resize event ,
Mouse drag move event , Click the button frequently click event ,
input Quickly enter events ......
Shake proof
When the event is triggered continuously , No more triggers for a certain period of time , The event handler will only execute once , If the set time comes before , It triggered the event again , Start the delay again .
Arrow function writing :
function debounce(func, delay) {
var timer = 0
return function(e) {
clearTimeout(timer)
timer = setTimeout(() => {
func(e)
}, delay)
}
}
apply change this How to write it :
function debounce(func, delay) {
var timer
return function(e) {
// console.log('timer', timer, e.target.value)
clearTimeout(timer)
var that = this
var args = arguments
timer = setTimeout(function(){
func.apply(that, args);
},delay)
}
}
demo
1. Input box :
var validate = debounce(function(e) {
console.log('-- Interface --', e.target.value)
}, 1000)
document.querySelector("input").addEventListener('input', validate)
2. Scroll bar :
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log(scrollTop)
}
window.onscroll = debounce(showTop, 1000)
throttle
When the event is triggered continuously , Make sure to call the event handler only once in a certain period of time .
function throttling(fn, delay){
let timer
return function () {
if (!timer) {
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay)
}
}
}
边栏推荐
- P6183 [USACO10MAR] The Rock Game S
- Common PHP interview questions (1) (written PHP interview questions)
- episodic和batch的定义
- Drive brushless DC motor based on Ti drv10970
- easyOCR 字符識別
- Anaconda uses China University of science and technology source
- JMeter performance test: serveragent resource monitoring
- Jmeter性能测试:ServerAgent资源监控
- PHP high concurrency and large traffic solution (PHP interview theory question)
- 可视化任务编排&拖拉拽 | Scaleph 基于 Apache SeaTunnel的数据集成
猜你喜欢
Run faster with go: use golang to serve machine learning
市值蒸发超百亿美元,“全球IoT云平台第一股”赴港求生
社区团购撤城“后遗症”
1330:【例8.3】最少步数
Thymeleaf uses background custom tool classes to process text
Machine learning notes - gray wolf optimization
Bugku telnet
MySQL----函数
Ten billion massage machine blue ocean, difficult to be a giant
Bugku cyberpunk
随机推荐
Cartoon: what are the attributes of a good programmer?
12 MySQL interview questions that you must chew through to enter Alibaba
Stm32+bh1750 photosensitive sensor obtains light intensity
Drive brushless DC motor based on Ti drv10970
机器学习笔记 - 灰狼优化
MySQL----函数
Type declaration of all DOM elements in TS
Thymeleaf uses background custom tool classes to process text
把 ”中台“ 的思想迁移到代码中去
可视化任务编排&拖拉拽 | Scaleph 基于 Apache SeaTunnel的数据集成
queryRunner. Query method
Bugku's steganography
OSI 七层模型
1330:【例8.3】最少步数
Jmeter性能测试:ServerAgent资源监控
The difference between SQL Server char nchar varchar and nvarchar
The difference between abstract classes and interfaces in PHP (PHP interview theory question)
Detailed explanation of usememo, memo, useref and other relevant hooks
Ecotone technology has passed ISO27001 and iso21434 safety management system certification
Ten billion massage machine blue ocean, difficult to be a giant