Implementation of waiting for the specified element to be loaded under jQuery (can be changed to a pure js version)_jquery

Let me first state the usage scenarios of this method so as not to mislead everyone.
For example, in the blog park, we cannot modify its source code,
then we can only find ways to monitor the appearance of elements.
So the following method is used when the source code cannot be modified, rather than writing your own project.

When I changed a few styles of my blog today, I thought it would be natural to add js.
I didn’t expect that the data was loaded by ajax, not the first time the page was loaded.
For example, the "Submit Comment" button below, the search button on the right, etc.
I wrote it naturally

Copy the code The code is as follows:

1 $("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //Submit button
2 $(".div_my_zzk").addClass("input-append"); // Search box
3 $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //Search button

But after refreshing the page, I found that there is something wrong No, after looking at the network, I found that it was coming from ajax.
I was helpless. In addition to writing the template myself, I could only find a way to modify the code myself.

Then here is the method I thought of waiting for the element to appear.
Although it is based on jQuery, the code is very concise and can be modified into a pure js version.

Copy code The code is as follows:

jQuery.fn.wait = function (func , times, interval) {
var _times = times || -1, //100 times
_interval = interval || 20, //20 milliseconds each time
_self = this,
_selector = this.selector, //Selector
_iIntervalID; //Timer id
if( this.length ){ //If it has been obtained, directly execute the function
func && func.call(this) ;
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //Exit if it is 0
clearInterval(_iIntervalID);
}
_times < ;= 0 || _times--; //If it is a positive number--

_self = $(_selector); //Select
again if( _self.length ) { //Determine whether to get it
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}

The method of use is of course very simple, with only 3 parameters.
func is a callback function, which is a function that is executed when the specified element appears.
times is the number of detections, the default is -1, it will be detected until it appears.
interval is the detection interval, the default is 20 milliseconds.

Let’s modify the previous code

Copy the code The code is as follows:

$("#btn_comment_submit").wait(function() { //Wait for the #btn_comment_submit element to be loaded
this.removeClass("comment_btn").addClass("btn"); //Submit button
// This here is $("#btn_comment_submit")
});

$("#widget_my_zzk").wait(function() { //Waiting for the #widget_my_zzk element to be loaded
$( ".div_my_zzk").addClass("input-append"); //Search box
$(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //Search button
});

Isn’t it very simple?

Of course, it still does not destroy the chain structure of jQuery. You can still $("#id").wait(function (){}).hide();
But then I thought about it, the elements were not loaded, so there was no point in continuing the chain, but forget it, I won’t change it, let’s leave it at that. Haha :-)

Finally, I have little experience. If what is written there is wrong, please give me some advice.