Foreplay 🌰

After the summary of the last article, we know that high frequency of triggering events in a short period of time may lead to adverse consequences.

For us in the development community, if the data is consistently updated in a state of high frequency, then the following problems may arise:

  • High frequency of front and rear end data interaction leads to waste of traffic.
  • Frequent interface rendering updates can cause page delays, stalling or suspended animation, affecting the experience.

Before we get to the point, let’s look at the following example:

<form action="" class="example-form"> <div> <label for="name"> </label> <input type="text" name="name" id="name" Placeholder ="please input your name" > </div> <div> <label for="res"> Id ="res" placeholder=" here's the result of each input "></textarea> </div> </form>
window.onload = () => {
    const inputEle = document.querySelector("#name");
    const resEle = document.querySelector("#res");
    inputEle.addEventListener("input", function (event) {
        console.log(this.value);
        resEle.value += `\n${ this.value }`
    });
}

In the input event of an input box, the current value of the input box is printed in a multiline text box. As you can see, every input of a pinyin letter, there will be an output record, the trigger frequency depends on the typing speed of the person.

New demand 🤬

Suppose we now have a new requirement to add logic to the input event by sending the current value of the input field to the background for storage.

As you can imagine, the frequency of backend interactions in this case is high, and a lot of the data is wasted because it doesn’t need to be sent and stored immediately.

We can consider optimizing this requirement, as long as we control the interaction frequency, mainly in the following two directions:

  • Send data every few seconds — throttle
  • When the user stops input, the timer starts, and the data is sent once after a certain period of time — anti-shaking

To implement image stabilization

First, we implement it in the buffeting direction: the input is output in a multiline text box only after the user has stopped typing for a while.

window.onload = () => { const resEle = document.querySelector("#res"); function changeOutputVal(value) { resEle.value += `\n${ value }`; } function debounce(fn, delay = 1000) { let timer = null; return function (... args) { console.log(args); if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(() => { fn.apply(this, args); }, delay); } } const outputRes = debounce(changeOutputVal, 1000); const inputEle = document.querySelector("#name"); inputEle.addEventListener("input", (eve) => { outputRes(eve.target.value); }); }

Code description:

  1. Each time an event is fired, the current Timer is cleared and the timeout call is reset, or retimed. This causes each high-frequency event to cancel the previous timeout call and causes the event handler to fail to fire.
  2. The timeout call triggered by the last event can be executed after the delay time only if the high-frequency event is stopped.

The running effect is as follows:

As you can see, after adding the anti-jitter code, the input event does not output multiple lines of text every time it is input. Instead, it triggers the output after the user stops entering the delay time. The frequency is indeed much lower. To some extent, it does optimize the display effect of the page, giving people a more comfortable visual experience.

conclusion

Using anti-jitter function skillfully can not only optimize performance, but also optimize the display effect, killing two birds with one stone.

~

~

The code is rough, but also more basic, behind will gradually toward the direction of complex iteration, you look at the official Haihan 🙏

~

~

To finish this article

Learn interesting knowledge, meet interesting friends, build interesting soul!

Everybody is good! I am the author of “programming samadhi” hermit king, my public account is “programming samadhi”, welcome to pay attention to, I hope you give me more advice!

Pay equal attention to knowledge and skills, internal force and external work and repair, theory and practice both hands should grasp, both hands should be hard!