Home > Developer > Web Develop
As a front-end development engineer, sometimes the business scene can not be simulated by hand speed, the old driver also has overturned when "you know." Therefore I write this article specially, hoped can be helpful to everybody.
What's involved:The first step1.chrome浏览器2.js代码3.函数节流
Open the Chrome browser and use the combo key ctrl+shift+i to open the developer tools, next.
Click Snippets
Step TwoClick New Snippet--input script ' name '-->ctrl+s save.
Step ThreeSelect the newly created script ' name ', in the second step to edit the JS code. Finally, as shown in the third step, run runs the code.
JS script code1. The following is the code on the website:
<body> <div class= "box" > <button class= " BTN "id= ' btn ' > snapping </button> </div> <script type=" Text/javascript ">/ * * * Snapping button * */ btn.onclick=function() { Console.log (' snapping up success! '); }; </script> </body>Every click Snapped console output snapped up successfully!
2. Script code
/* * * The simplest script code * version 1.0.1 */ Btn.click (); // Trigger button to execute Click event /* */for (var i=0;i<100;i++) { btn.click ();}Through the above script JS code can know, we can in the Chrome browser built-in script, and control the execution.
When developers simulate the high concurrency of real-world environments, we can use this script to simulate testing. Through the script we have just found that we have developed the page JS is a lot of problems. Suppose that the snapping button triggers the request data interface. It will appear that n requests are made within a single time. Dealing with this problem can refer to preventing duplicate submissions//code written on the website/** * Snapping button * **/Btn.onclick=function() {Throttle (function() {Console.log (' Snapping up success! ‘); },500);};/** * Function Throttle * @fn {Function} callback function * @time {number} time, milliseconds * **/functionThrottle (fn,time) {if(throttle.id) {cleartimeout (throttle.id); }; Throttle.id=settimeout (function() {fn (); },time|| 200);}
We can filter out the malicious loop triggering event in the above way. This kind of function throttling method also obtains the unanimous approval and the promotion.
SummarizeIn this way, we not only learned to make a simple JS script, but also learned a simple way to block the JS script. Want to really write some useful JS script also need your own efforts Oh! Want to be blocking out malicious JS script, the simple use of the front-end technology is actually a great difficulty! This is for children's shoes who are trying to learn the front end and want to go farther on the front road. Bless you.
Front-end JS script and prevent JS script
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
