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

This article introduces the relevant knowledge of "what are the questions often asked in the front-end JS interview?" in the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Question 1. Throttling (throttle) and anti-shaking (debounce) of events

Some browser events can be triggered quickly multiple times in a short period of time, such as resizing the window or scrolling down the page. For example, if the page window scrolling event is monitored and the user continues to scroll down the page quickly, the scrolling event may be triggered thousands of times in 3 seconds, which can cause some serious performance problems. So how can we avoid such a problem? here are two ways:

1. Throttling (throttle)

The main idea of throttling is that no matter how many callbacks you trigger in a certain period of time, you only recognize the first callback and respond at the end of the clock.

Code example:

/ / fn is the event callback that we need to wrap, and interval is the threshold function throttle of the time interval (fn Interval) {/ / last is the time when the last callback was triggered let last = 0 / / return the throttle processing result as a function to return function () {/ / reserve the this context of the call let context = this / / the parameter passed in during the reservation call let args = arguments / / record the time when the callback was triggered let now = + new Date () / / determine whether the time difference between the last trigger and this trigger is less than the threshold of the interval if (now-last > = interval) {/ / if the interval is greater than the threshold set by us Then execute the callback last = now Fn.apply (context, args);} / / wraps the callback of scroll with throttle const better_scroll = throttle (()) = > console.log ('scroll event triggered'), 1000) document.addEventListener ('scroll', better_scroll)

2. Anti-shaking (Debounce)

The main idea of anti-shaking is: I will wait for you to the end. In a certain period of time, no matter how many callbacks you trigger, I only recognize the last one.

Code example:

/ / fn is the event callback we need to wrap, and delay is the waiting time function debounce (fn) for each deferred execution. Delay) {/ / timer let timer = null / / returns the debounce processing result as a function to return function () {/ / retain the this context of the call let context = this / / the parameter passed in when the call is let args = arguments / / each time the event is triggered All clear the old timer if (timer) {clearTimeout (timer)} / / set a new timer timer = setTimeout (function () {fn.apply (context, args)}, delay)}} / / wrap the callback of scroll with debounce const better_scroll = debounce (()) = > console.log ('scroll event triggered'), 1000) document.addEventListener ('scroll', better_scroll)

3. Practical application of throttling and anti-shaking.

In our application, a single application throttling or anti-shaking is not a good idea.

Scenario: if the user operates frequently-he performs the next operation without waiting for the end of the delay time set by debounce, each time debounce regenerates the timer for the user, and the callback function is delayed countless times. Frequent delays will cause users to get no response, and users will also have the impression that "this page is stuck".

In order to avoid self-defeating, we need to borrow the idea of throttle to create a "bottom line" debounce-- and so on, but I have my principle: within delay time, I can regenerate the timer for you; but as long as the delay time is up, I have to give the user a response. The idea of combining throttling with anti-shaking.

Code example:

/ / fn is the event callback we need to wrap, delay is the threshold of the time interval function throttle (fn, delay) {/ / last is the time when the last callback was triggered, and timer is the timer let last = 0 Timer = null / / return the throttle processing result as a function to return function () {/ / retain the this context of the call let context = this / / the parameter passed in during the reservation call let args = arguments / / record the time when this callback is triggered let now = + new Date () / / determine the time of the last trigger and the time of this trigger Whether the interval difference is less than the threshold if of the interval (now-last)

< delay) { // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器 clearTimeout(timer) timer = setTimeout(function () { last = now fn.apply(context, args) }, delay) } else { // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应 last = now fn.apply(context, args) } } } // 用新的throttle包装scroll的回调 const better_scroll = throttle(() =>

Console.log ('triggered scrolling event'), 1000) document.addEventListener ('scroll', better_scroll) question 2, event principal-agent

Traditional event binding:

Walk the dog Pay bills Make dinner Code for one hour document.addEventListener ('DOMContentLoaded', function () {let app = document.getElementById (' todo-app'); let itimes = app.getElementsByClassName ('item'); for (let item of items) {item.addEventListener (' click', function () {alert ('you clicked on item:' + item [XSS _ clean]);})})

While this is technically fine, the problem is to bind events to each item separately. This is not a big problem for the current four elements, but what if 10000 items are added to the to-do list (they may have a lot to do)? The function then creates 10000 separate event listeners and binds each event listener to DOM, which makes code execution very inefficient. How to bind events efficiently:

Code example based on event delegate:

Document.addEventListener ('DOMContentLoaded', function () {let app = document.getElementById (' todo-app'); app.addEventListener ('click', function (e) {if (e.target & & e.target.nodeName =' LI') {let item = e.target; alert ('you clicked on item:' + item [XSS _ clean])}) problem 3. Use of closures

Closures often appear in interviews so that the interviewer can measure how familiar you are with JS and whether you know when to use closures.

A closure is basically a variable that an internal function can access outside its scope. Closures can be used to hide variables and create function factories.

Incorrect closure application:

Const arr = [10,12,15,21]; for (var I = 0; I < arr.length; iTunes +) {setTimeout (function () {console.log ('The index of this number is:' + I);}, 3000);}

If you run the above code, after a 3-second delay, you will see that each printout is actually 4, rather than the expected 0mem1mem2jp3.

The reason is that the setTimeout function creates a function (closure) that can access its external scope, which is a loop containing index I. After 3 seconds, the function is executed and the value of I is printed out, which is 4 at the end of the loop, because it loops through 0, 1, 2, 3, 4 and the loop finally stops at 4.

The correct use of closures:

/ method 1: const arr = [10,12,15,21]; for (var I = 0; I < arr.length; iTunes +) {setTimeout (function (i_local) {return function () {console.log ('The index of this number is:' + i_local);}} (I), 3000)} / / method 2: const arr = [10,12,15,21]; for (let I = 0; I < arr.length) SetTimeout (function () {console.log ('The index of this number is:' + I);}, 3000);}, what are the questions often asked in front-end JS interviews? If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.