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

In this article Xiaobian for you to introduce in detail "JavaScript function anti-shake and throttling how to apply", the content is detailed, the steps are clear, the details are handled properly, I hope this "JavaScript function anti-shake and throttling how to apply" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

I. the definition of throttling 1.1 of the function

The function execution is triggered multiple times at the same time, which executes the same content and requires only the first request to be executed.

For example, the scroll event, where the mouse scrolls to trigger function execution multiple times at a time, only needs to be executed once.

1.2 solution

Define the effect similar to the switch, define a variable storage default value, determine the data stored in the variable before triggering execution, if it is the original data to assign the variable new data, if it is not the original data, execute the program execution after the termination of the return.

1.3 case demonstration

Here we first write a window listening event.

1.3.1 code demonstrates that Document body {/ / sets the height to display the scroll bar height: 4000px;} / / creates a window listening event window.addEventListener ("scroll", function () {fun ()) }) / / write any background output function function fun () {console.log (666); console.log (888);} 1.32 run result

As you can see, the blogger only flipped the mouse wheel once, but the function was executed more than once.

The throttling of the function is to scroll once, execute the function once, and output the result once in the background.

1.3.3 add function throttling operation Document body {height: 4000px;} / create window listening event / / store a default value of true let flag = true / / window listening event window.addEventListener ("scroll", function () {if (flag) {flag = false;} else {return;} fun () }) / / write any background output function function fun () {/ / [xss_clean] ('has reached the roll-up height of 1000px') console.log (666);} 1.34 run result

Second, the anti-shake 2.1 definition of the function

The function execution is triggered many times at the same time, and only the last request is executed. The result of the function program that is triggered many times is different.

2.2 solution

Through the delay time execution program of the timer, first clear the timer, and then trigger the new delay timer defined to execute the function program.

2.3 case demonstration

Here we first write an input input data event.

2.3.1 Code shows Document / / get tag const oIpt = document.querySelector ('input'); / / input input event listener oIpt.addEventListener (' input',function () {console.log (`you entered ${oIpt.value.length} word`);}) 2.3.2 run result

What I judge here is the length of the input string. You can see that the output is changed from 1 to 5 words, and finally the Chinese character is changed back to 2 characters. The anti-shaking operation is that I only type the length of the last "Hello" string.

That is, multiple function requests are triggered at the same time, and only the last one is executed.

2.3.3 add function anti-shake operation Document / / get the tag const oIpt = document.querySelector ('input'); / / input input event listening oIpt.addEventListener (' input',function () {/ / clear timer clearInterval (time) first) / / define delayer delay execution function program time = setTimeout (function () {/ / delay one second delay execution program setPage ();}, 2000) }) function setPage () {console.log (`you entered ${oIpt.value.length} word`);} 2.3.4 run the result

After reading this, the article "Anti-shake and throttling of functions in JavaScript" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to 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.