A simple knowledge summary of loading effect

Time:2020-5-22

cause

Last night, when I saw animation in my ten day CSS3 course on mooc.com, I suddenly wanted to go to Zhang Xinxu’s blog to see if he had written some interesting animations with animation. As a result, I saw an effect that I wanted to do before, but I didn’t know how to achieve.

This effect is a little difficult to describe. Usually, when the page loads data, it may display “loading…”. What I want to achieve is the “…” in the back. How can I make it display one by one, and then loop.

After learning animation, this is a very good implementation. But the effect of Zhang Xinxu is that when the loading time is too long, the prompt of “timeout” will be displayed. The key code is shown in the figure, and the detailed code is here.

A simple knowledge summary of loading effect

This is very humanized. JS code is also rare. But the problem is, just a few lines of code, I didn’t understand…
1. Why use bind? Don’t they all use on? What’s the difference between bind and on
2. Settimeout() why. Bind (this) should be used after the bound function

The difference between bind and on in jquery

Are used to bind events. If the binding element already exists, you can use either one. There is no difference.

Note that there is no difference between the two under the premise that the bound element already exists.
What if this element was not originally generated by clicking a button?

Let’s look at the syntax of bind and on binding events in jQuery documents:

.bind(events [,eventData], handler)

.on(events [,selector] [,data], handler)

As you can see from the syntax, the. On method has one more parameter ‘selector’ than the bind method.

Its function is to filter out the specified sub elements of the DOM element calling the. On method. The most common scenario is a UL list. I need to click the “add Li” button to add a Li at the end of the UL list. As follows:
$(‘ul’).on(‘click’,’li’,function(){console.log(‘click’);});

Therefore, the advantage of. On method is that when I use

$('ul '). Append (' < li > I am the new Li < / Li > ');

To dynamically generate a new Li, the. On method can bind the click event to its newly generated element. The. Bind method doesn’t work because it doesn’t provide the ‘selector’ parameter in its syntax.

This benefit of the. On method is the legendary event delegation. Delegate the event of a child element to its parent element. When clicking the child element, the event will bubble up one level (that is, the parent element) due to the event bubbling principle, which triggers the event that we bind to the parent element with the. On method.

This in setTimeout points to

I feel that there are many pits in setTimeout, so I am very strange to setTimeout.
Only after checking can we know that when setTimeout passes in the function, this in the function points to the window object. As follows:

var num = 0;
function Obj (){
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(function(){
            console.log(this.num);
        }, 1000)
    }
}
var obj = new Obj; 
obj.getNum (); // 1 printed obj.num , value is 1
obj.getNumLater () // 0 is printing window.num , value 0

You can see that this in the function of setTimeout points to the window object. Because the code called by settimeout() runs in an execution environment that is completely separate from the function it is in, the this keyword contained in the code points to a window (or global) object. See MDN setTimeout for details.

Correct this point in setTimeout with bind

At first, I thought this bind was the same bind as the aforementioned bind. Later, I looked at MDN bind and found that it was different.

It’s Function.prototype As a built-in method of jQuery, bind mentioned earlier is a method of jQuery binding events.

Bind syntax: bind( this.args ,arg1[, arg2[, …]]])
The parameters in the later section may be a little dizzy. It doesn’t matter. Now just use the first parameter.

Look back at setTimeout in Zhang Xinxu’s code

setTimeout(function() {
        this.ajaxing = false;
        this.innerHTML  ="Submission timeout";
}.bind(this), 30000);

First of all, it should be clear that the current this refers to the a element to be clicked.

When a function in setTimeout is executed, bind will create a new function, and the first parameter of bind will point to this when the new function is run. Therefore, this that originally pointed to window points to the current this, that is, to this a element.

Other methods

There are two ways to change this point in setTimeout. One is closure, which stores this in a variable. When the function in setTimeout accesses the new variable internally, the current object can be obtained. Rewrite the above code as follows:

$("#submit").bind("click", function() {
    if (!this.ajaxing) {
    var that = this;
        this.ajaxing = true;
        this.innerHTML  ='in order submission < span class = "ani_ dot">...</span>';
        setTimeout(function() {
            that.ajaxing = false;
            that.innerHTML  ="Submission timeout";
        }, 30000);
    }
});

Another way is to use the arrow function to directly overwrite setTimeout

setTimeout(()=>{
        that.ajaxing = false;
        that.innerHTML  ="Submission timeout";
}, 30000);

reference resources

The difference between jQuery bind and on bind events
On this pointing in setinterval and setTimeout

Recommended Today

IOS shares through camera image recognition technology

At present, computer image recognition can be divided into two categories according to the nature of phenomena: 1. Image recognition based on regular operation, such as template matching methods such as color and shape 2. Image recognition based on statistics. For example, machine learning ml, neural network and other artificial intelligence methods **Difference: * * […]