Shulou(Shulou.com)06/03 Report--

This article mainly talks about "what are the differences between JavaScript anti-shaking and throttling". Interested friends might as well take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the differences between JavaScript anti-shaking and throttling"?

Foreword:

As a front-end development, there are two requirements

(1) search requirements

The logic of the search is to monitor the user input event, and after the user input is completed, the data is sent to the back end, which returns the matching data, and the front end displays the data to the page. If you send a request as long as the user enters it, it will put pressure on the back end to control the frequency of the request.

(2) the page loads data infinitely.

The logic of unlimited loading data on a page is to listen for user scrolling events and to request data from the next page to be displayed on the page during the user scrolling process. Then sending a request as long as it is scrolled will also cause pressure on the back-end request and need to control the frequency of the request.

Both of the above seem to be a matter of controlling the frequency of requests, but the requirements are slightly different: search is when the user enters the input many times and sends the request only after the user stops typing briefly, which needs to be achieved by anti-shaking. Scrolling load data is requested at intervals when the user scrolls the page. Even if the user keeps scrolling, the request will be made instead of waiting for the user to stop scrolling.

1. Anti-shaking

Meaning:

The simple way to understand is that the user triggers the event multiple times, and the event does not execute when the user has been triggering the event, but only once after the user stops triggering the event for a period of time.

Achieve:

/ / @ fn is the corresponding request data / / @ ms is the time interval for multiple events triggered by the user is a millisecond function debounce (fn, ms) {let timeout = null return function () {clearTimeout (timeout) timeout = setTimeout (() = > {fn.apply (this, arguments)}, ms)}}

Principle:

Each time the user triggers the event, the execution will be delayed, and the last delay timer will be cleared before setting the delay timer execution. In the end, the event will be triggered only after the interval between which the user continuously triggers the event exceeds the parameter ms millisecond set by us.

Test:

Function getData () {console.log ('send request...')} document.getElementById ('searchInput'). Oninput = debounce (getData, 800) / / if the user has been typing, the request will not be sent / / the data will be requested only once the user's continuous input interval exceeds 800ms, that is, the user will request data without input in the 800ms. 2. Throttling

Meaning:

The simple way to understand is that the user has triggered the event many times, and the event will be executed at intervals and multiple times during the process that the user has been triggering the event.

Achieve:

/ / @ fn is the corresponding request data / / @ ms is the time interval for multiple events triggered by the user is a millisecond function throttle (fn, ms) {let flag = true return function () {if (! flag) return flag = false setTimeout (()) > {fn.apply (this, arguments) flag = true} Ms)}}

Principle:

Each time the user triggers an event, the user sets a delay timer, but if the delay timer has been set, the next timer will not be started until the last delay timer is executed, so that the user always triggers the event. events are executed at intervals

Test:

Function getData () {console.log ('send request...')} _ window.onscroll = throttle (getData, 800) / / users will request data at intervals during scrolling. 3. Summary

Both throttling and anti-shaking essentially control the frequency of event execution, but the timing of triggering events is essentially different. Anti-shaking is when the user triggers the event many times and executes the event once when the user stops triggering the event. Throttling is that the user triggers the event many times and executes the event at intervals during the process of multiple triggers.

At this point, I believe you have a deeper understanding of "what is the difference between JavaScript anti-shaking and throttling". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.