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

This article is to share with you about the web project development JS function anti-shake and throttling sample code how to write, the editor feels very practical, so share with you to learn, I hope you can get something after reading this article, say no more, follow the editor to have a look.

Anti-shaking

Classic applications: accordion effect

Introduce

There is no anti-shaking website:

Made a shaking-proof website:

Anti-shake scene 1 (mouse move in)

Jitter: the user did not want to trigger this interaction, but the interaction event was triggered by accidental mouse jitter.

Example: want to see the fifth picture. I don't want to see 2, 3, 4. But when the mouse slid from the first to the fifth, it was accidentally placed on 2-3-4. False trigger.

Function anti-shake: if the user triggers an event several times in a row, it will only be executed for the last time.

The principle of solution: start the timer, if the event is triggered several times during the interval, the last timer will be cleared each time.

Example and solution code:

Animation-case "accordion" * {margin: 0; padding: 0;} ul {list-style: none; width: 2400px;} # box {width: 1200px; height: 400px; border: 1px solid red; margin: 100px auto; overflow: hidden } # box li {width: 100px; height: 400px; float: left; transition: all 0.5s ease-out;} # box li.over {width: 800px;}

Let app = new Vue ({el:'#box', data: {overIndex:0, list: ['. / images/collapse/1.jpg','. / images/collapse/2.jpg','. / images/collapse/3.jpg','. / images/collapse/4.jpg' '. / images/collapse/5.jpg',], timeID:null}, methods: {doEnter (index) {/ * enable anti-shake * / / 1.1 clear the last timer first Start the timer (anti-shake interval) based on this time clearTimeout (this.timeID) / / 1.2 this.timeID = setTimeout (()) > {this.overIndex = index }, 500)},}) Anti-shake scene 2 (keyboard keys)

Classic application scenario: searching for associative words

In development, the back-end of this function will use middleware "OpenSearch" or "Elasticsearch", and the back-end logic processing will be very efficient and fast.

-it is only based on the front-end point of view to optimize from the aspect of reducing http requests.

Document let timeID = null; document.querySelector ('input'). Oninput = function () {/ * function anti-shake * / (1) clear the previous timer clearTimeout (timeID) / / (2) start the anti-shake timer timeID = setTimeout () = > {console.log (this.value) }, 500);} function throttling

Concept: solve the performance problems caused by high-frequency events; high-frequency events: on the page, some events trigger with a very high frequency.

For example: mouse movement, wheel event.

Solution: the user triggers events many times in a row, only once in a specified period of time

Example and solution code:

Document body {height: 3000px;} let lastTime = null; let i = 1 _ window.onmousemove = function () {/ * function throttling * / (1) determine the interval between two triggered events let time = Date.now () if (time-lastTime > = 500) {console.log ('number of mouse movements:' + iTunes +) / / (2) this trigger time is used as the next reference interval lastTime = time}} / / let j = 1 / / _ window.onscroll = function () {/ (1) determine the interval between two triggering events / / let time = Date.now () / / if (time-lastTime > = 500) {/ / console.log ('mouse scrolls:' + jacks +) / (2) the trigger time this time serves as the next reference interval / / lastTime = time / /} / /} the above is how to write the sample code of JS function anti-shake and throttling in the development of web project. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.