1. If you
Usage Scenario (the event is triggered multiple times and executed only once)
- To prevent users from clicking buttons such as login and SMS so fast that multiple requests are sent, you need to avoid shaking
- When adjusting the browser window size, the number of resize times is too frequent, resulting in too much calculation. At this time, it needs to be in place once, so it uses anti-shake
- The text editor saves in real time and saves after one second when there is no change operation
No matter how many times the event is triggered, it must be executed n seconds after the event is triggered. If you trigger the event within n seconds of the event being triggered, the time is recalculated and executed n seconds after the event is triggered, but the event is not triggered for n seconds before it is executed.
<input type="text" id="input" placeholder="Please enter the content" />
<script>
/* 1. When the event is continuously triggered (the keyboard is continuously input) and no event is triggered for a certain period of time (the keyboard is up), the event handler will execute once. If the event is triggered again before the set time, the delay will restart 2. Store the timer variable. All independent executing functions have access to the timer variable, and now the timer variable is created only once, which is unique. We just keep assigning the timer value to delay, and each clearing delay is the clearing delay of the last definition. Equivalent to multiple functions sharing the same external variable */
function debounce(callback, delay) {
if (typeofcallback ! = ='function') { // The parameter type is function
throw new TypeError('fn is not a function');
}
let timer;
return function () {
if(timer ! = =null) {
clearTimeout(timer);
}
timer = setTimeout(() = > {
// Call the call function to the input box (apply also works)
callback.call(this);
}, delay);
};
}
// Get the node
let input = document.getElementById("input");
// Listen for keystrokes
input.oninput = debounce(function () {
console.log(this.value);
}, 1000);
2 / / way
// Can be used to pass multiple arguments
function debounce(fun, delay) {
return function (. args) {
clearTimeout(fun.id);
fun.id = setTimeout(() = > {
fun.call(this. args); }, delay); }; }let inputb = document.getElementById("debounce");
let debounceAjax = debounce((content, arg, obj) = > {
console.log(" content ", content);
console.log(" arg ", arg);
console.log(" obj ", obj);
}, 1000);
inputb.addEventListener("keyup".function (e) {
// Pass multiple arguments
debounceAjax(e.target.value, { x: 5.y: 10 }, { z: 5.k: 10 });
});
Copy the code
The throttle
Usage scenarios
When the event is continuously triggered, it is not executed many times, but every fixed time. When the trigger stops, the logical code is executed after a period of time
- Scroll event, calculate position information every second, etc
- Browser plays events, calculates progress information every second, and so on
// Get the node
let input = document.getElementById("input");
function throttle(callback, delay) {
let flag = true;
return function () {
if (flag) {
setTimeout(() = > {
callback.call(this);
flag = true;
}, delay);
}
flag = false;
};
}
input.oninput = throttle(function () {
console.log(this.value);
}, 1000);
window.onscroll = throttle(function () {
console.log("hello");
}, 1000);
Copy the code