This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021
As the basis of JS, the anti – shake throttling should be classic and could not be more classic
First, anti – shake function
1, define,
In fact, why called anti – shake function, speaking is to prevent jitter. That is, when events are constantly fired frequently, performance is affected. In order to optimize this case of frequent triggering events, there are anti-shake functions.
2. Application scenarios
For example: Window resize, scroll, mousedown, Mousemove, keyUp, keyDown…
3. Concrete implementation
First of all, we need to know how to implement the principle of anti-shake: no matter how the event is triggered, the thing to be executed must be executed n seconds after the event is triggered.
That is: if the event is triggered within n seconds, the new time shall prevail, n seconds after the execution.
function debounce(fn, delay) {
let timer;
return function() {
var context = this; / / this point
var args = arguments; / / the event object
clearTimeout(timer)
timer = setTimeout(() = >{ fn.apply(context, args) }, delay); }}Copy the code
At this point, we have implemented a simple anti-shake function.
4, test,
Then let’s test the anti-shake function we just wrote:
<input type="text" id="input">
Copy the code
function inputFun(value) {
console.log('What you output is' + value)
}
const input = document.getElementById("input")
const debounceInput = debounce(inputFun, 500)
// Listen for Input to the Input box
input.addEventListener('keyup'.function(e) {
debounceInput(e.target.value)
})
Copy the code
Second, throttling function
1, define,
A throttling function is one that does only one thing at a time, allowing lazy loading with good performance.
2. Application scenarios
For example, listen for the distance between the scroll bar and the top.
3. Concrete implementation
As mentioned earlier, throttling means only doing one thing at a time, so you only need to give a variable to judge whether the thing is completed.
function throttle(func, wait) {
let timerOut;
return function() {
let context = this;
let args = arguments;
if(! timerOut) { timerOut =setTimeout(function() {
timerOut = null
func.apply(context, args)
}, wait)
}
}
}
Copy the code
4, test,
Similarly, let’s test, for example, we need to listen to the browser scroll event, return the current scroll bar from the top of the distance.
Then we can use the throttle function:
function showTop() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('Scrollbar position' + scrollTop)
}
window.onscroll = throttle(showTop, 1000)
Copy the code