setTimeout(function() { $('.sub_txt_wp01').find('.a').addClass('on'); }, 1000); setTimeout(function() { $('.sub_txt_wp01').find('.b').addClass('on'); }, 2000); setTimeout(function() { $('.sub_txt_wp01').find('.ab_wp').removeClass('on'); }, }, 3000);
setTimeout(function() { $('.sub_txt_wp02').find('.c').addClass('on'); }, 4000); setTimeout(function() { $('.sub_txt_wp02').find('.d').addClass('on'); }, 5000); setTimeout(function() { $('.sub_txt_wp02').find('.cd_wp').removeClass('on'); }, }, 6000);
If you write the code this way
a gives class name on after 1 second b gives class name on after 2 seconds
Parents of a,b remove class name on after 3 seconds
c gives class name on after 4 seconds Give class name on 5 seconds after d.
c,d's parents remove class name on after 6 seconds
It's like this, right? But we only do it once and it ends.
If you want to keep repeating that process, how do you write the code?
jquery css settimeout setinterval
Hello, I'm Yamoo. :-)
As I pass by, I accidentally check and answer your questions.
The key to the question is Repeat. This means that a series of actions are repeated to add or remove the class attribute on. I think he probably asked to process the animation.
First, let's check the results that the question asks.
However, {#}hashcode does not allow GIF image insertion. Instead, it leaves a link address that can verify the GIF image.
And the completed code is as follows. I've explained the code in detail below, so look at the code and read the description.
function turnOnOffClass() {
var dfd = $.Deferred();
var $wp1 = $('.sub_txt_wp01');
var $wp2 = $('.sub_txt_wp02');
setTimeout(function() { $wp1.find('.a').addClass('on'); }, 1000);
setTimeout(function() { $wp1.find('.b').addClass('on'); }, 2000);
setTimeout(function() { $wp1.find('.ab_wp').removeClass('on'); }, 3000);
setTimeout(function() { $wp2.find('.c').addClass('on'); }, 4000);
setTimeout(function() { $wp2.find('.d').addClass('on'); }, 5000);
setTimeout(function() { $wp2.find('.cd_wp').removeClass('on'); }, 6000);
setTimeout(function() { dfd.resolve($($wp1, $wp2)); }, 7000);
return dfd.promise();
}
function resetClass($wps){
var $wp1 = $wps.eq(0);
var $wp2 = $wps.eq(1);
$wp1.find('.a, .b').removeClass('on');
$wp1.find('.ab_wp').addClass('on');
$wp2.find('.c, .d').removeClass('on');
$wp2.find('.cd_wp').addClass('on');
loopAction();
}
function loopAction(){
$.when(turnOnOffClass()).then(resetClass);
}
loopAction();
Now! Let's take a closer look at the code writing process to produce results.
For your information, I confirmed that I used the jQuery library in the question code and answered using jQuery. If it was a JavaScript code question, you would have answered it using the Promise object.
First, let's look at the functions that we'
There are three main tasks for repetitive performance.
Set the name of the function you want to create as follows:
// on functions that add and remove classes
function turnOnOffClass() { ... }
// Function that initializes class settings
function resetClass() { ... }
// a function that repeats a series of actions
function loopAction() { ... }
If you look at the loopAction() code among the created functions, $ inside.When() and .then() were used. As the question asks, Because you have to delay the action until the series of actions is complete.
If you look at the jQuery API, $ as a way to handle the Deferred behavior.When(), different.then() and more. Use the reference below to find out how to use it.
Using this, the following code is written: When the turnOnOffClass() function completes (when), run the resetClass() function. The important point here is that the resetClass() function delayed the execution time.
function loopAction(){
// While the turnOnOffClass() function is running
// When all actions within the function are terminated over the defined time (7 seconds),
$.when(turnOnOffClass())
// Run the resetClass function.
.then(resetClass);
}
// Executes a function loopAction() that defines the action to be repeated. (Performed once)
loopAction();
Next, let's look at the turnOnOffClass() function code. Let's cover only what's not in the question code. $.Keep an eye out for the Deferred() code. We talked about the need for a deferred processing. jQuery is leveraged because it provides a method for delayed processing.
The Deffered object referenced in the dfd variable has the resolve() method and the reject() method, etc., but this example does not cover asynchronous communication (Ajax), so use only the resolve() method.
When you run dfd.resolve(), you can set the factor to pass to the different.then() method. $($wp1, $wp2) Pass the jQuery object that collects $wp1, $wp2 through the code.
Finally, returns the different.promise() object as the result value of the function. $ must return a promiscuous object.You can take it from the when() method and run the .then() method. For more information, see jQuery API different.promise().
/**
* @description Defines a set of actions that add/remove class properties 'on'.
* @returns{object} jQuery.Different().promise() object returned.
*/
function turnOnOffClass() {
// Deferred: "It means to postpone (delay) an action, etc."
// After creating the jQuery.Different() object, refer to the dfd variable.
var dfd = $.Deferred();
// Locate the document object, create the jQuery object, and reference it to each variable.
var $wp1 = $('.sub_txt_wp01');
var $wp2 = $('.sub_txt_wp02');
// Set each second to process.
setTimeout(function() {
$wp1.find('.a').addClass('on'); }, 1000);
setTimeout(function() {
$wp1.find('.b').addClass('on'); }, 2000);
setTimeout(function() {
$wp1.find('.ab_wp').removeClass('on'); }, 3000);
setTimeout(function() {
$wp2.find('.c').addClass('on'); }, 4000);
setTimeout(function() {
$wp2.find('.d').addClass('on'); }, 5000);
setTimeout(function() {
$wp2.find('.cd_wp').removeClass('on'); }, 6000);
// The dfd variable that references the delay object in the last action
// Run the object's decision method, resolve(), to control
// jQuery objects ($wp1, $wp2) are added to the jQuery object
// Create and forward.
setTimeout(function() {
dfd.resolve($($wp1, $wp2)); }, 7000);
// Run the dfd object method prompt() to return the prompt object.
return dfd.promise();
}
Next, let's take a look at the resetClass() function to return to before it is performed. The resetClass() function is passed to the .then() function to wait$.Runs in the ..then() syntax after when()
The jQuery object passed when dfd.resolve() was executed is passed as the first factor. Set the appropriate parameter name $wps. (Use as target for API)
The rest will write code to return to the original state.
/**
* Return the @description class property to its initial settings.
* @param {jQueryObject} Receive jQuery object inputs passed from $wpspromise as parameters.
*/
function resetClass($wps){
// In the received jQuery object (collected .sub_txt_wp01, .sub_txt_wp02 document object)
// Filter jQuery objects indexed by 0, 1, respectively, and refer to the regional variables $wp1, $wp2.
var $wp1 = $wps.eq(0);
var $wp2 = $wps.eq(1);
// Reverts the class property to the initial setting.
$wp1.find('.a, .b').removeClass('on');
$wp1.find('.ab_wp').addClass('on');
$wp2.find('.c, .d').removeClass('on');
$wp2.find('.cd_wp').addClass('on');
// Re-run the action that needs to be repeated.
// (Two, three, four,... Repeat)
loopAction();
}
Okay! It's time to wrap up. Let's synthesize (including comments) the code we covered earlier.
/**
* @description Defines a set of actions that add/remove class properties 'on'.
* @returns{object} jQuery.Different().promise() object returned.
*/
function turnOnOffClass() {
// Deferred: "It means to postpone (delay) an action, etc."
// After creating the jQuery.Different() object, refer to the dfd variable.
var dfd = $.Deferred();
// Locate the document object, create the jQuery object, and reference it to each variable.
var $wp1 = $('.sub_txt_wp01');
var $wp2 = $('.sub_txt_wp02');
// Set each second to process.
setTimeout(function() {
$wp1.find('.a').addClass('on'); }, 1000);
setTimeout(function() {
$wp1.find('.b').addClass('on'); }, 2000);
setTimeout(function() {
$wp1.find('.ab_wp').removeClass('on'); }, 3000);
setTimeout(function() {
$wp2.find('.c').addClass('on'); }, 4000);
setTimeout(function() {
$wp2.find('.d').addClass('on'); }, 5000);
setTimeout(function() {
$wp2.find('.cd_wp').removeClass('on'); }, 6000);
// The dfd variable that references the delay object in the last action
// Run the object's decision method, resolve(), to control
// jQuery objects ($wp1, $wp2) are added to the jQuery object
// Create and forward.
setTimeout(function() {
dfd.resolve($($wp1, $wp2)); }, 7000);
// Run the dfd object method prompt() to return the prompt object.
return dfd.promise();
}
/**
* Return the @description class property to its initial settings.
* @param {jQueryObject} Receive jQuery object inputs passed from $wpspromise as parameters.
*/
function resetClass($wps){
// In the received jQuery object (collected .sub_txt_wp01, .sub_txt_wp02 document object)
// Filter jQuery objects indexed by 0, 1, respectively, and refer to the regional variables $wp1, $wp2.
var $wp1 = $wps.eq(0);
var $wp2 = $wps.eq(1);
// Reverts the class property to the initial setting.
$wp1.find('.a, .b').removeClass('on');
$wp1.find('.ab_wp').addClass('on');
$wp2.find('.c, .d').removeClass('on');
$wp2.find('.cd_wp').addClass('on');
// Re-run the action that needs to be repeated.
// (Two, three, four,... Repeat)
loopAction();
}
/**
* @description Defines the action to be repeated.
*/
function loopAction(){
// While the turnOnOffClass() function is running
// When all actions within the function are terminated over the defined time (7 seconds),
$.when(turnOnOffClass())
// Run the resetClass function.
.then(resetClass);
}
// Executes a function loopAction() that defines the action to be repeated. (Performed once)
loopAction();
The following code has been finally unnotated: :-)
function turnOnOffClass() {
var dfd = $.Deferred();
var $wp1 = $('.sub_txt_wp01');
var $wp2 = $('.sub_txt_wp02');
setTimeout(function() { $wp1.find('.a').addClass('on'); }, 1000);
setTimeout(function() { $wp1.find('.b').addClass('on'); }, 2000);
setTimeout(function() { $wp1.find('.ab_wp').removeClass('on'); }, 3000);
setTimeout(function() { $wp2.find('.c').addClass('on'); }, 4000);
setTimeout(function() { $wp2.find('.d').addClass('on'); }, 5000);
setTimeout(function() { $wp2.find('.cd_wp').removeClass('on'); }, 6000);
setTimeout(function() { dfd.resolve($($wp1, $wp2)); }, 7000);
return dfd.promise();
}
function resetClass($wps){
var $wp1 = $wps.eq(0);
var $wp2 = $wps.eq(1);
$wp1.find('.a, .b').removeClass('on');
$wp1.find('.ab_wp').addClass('on');
$wp2.find('.c, .d').removeClass('on');
$wp2.find('.cd_wp').addClass('on');
loopAction();
}
function loopAction(){
$.when(turnOnOffClass()).then(resetClass);
}
loopAction();
var addClassFlag = false;
setInterval(
if( addClassFlag ){
addClass();
}, 7000);
functoin addClass(){
setTimeout(function() { $('.sub_txt_wp01').find('.a').addClass('on'); }, 1000);
setTimeout(function() { $('.sub_txt_wp01').find('.b').addClass('on'); }, 2000);
setTimeout(function() { $('.sub_txt_wp01').find('.ab_wp').removeClass('on'); }, 3000);
setTimeout(function() { $('.sub_txt_wp02').find('.c').addClass('on'); }, 4000);
setTimeout(function() { $('.sub_txt_wp02').find('.d').addClass('on'); }, 5000);
setTimeout(function() { $('.sub_txt_wp02').find('.cd_wp').removeClass('on'); }, 6000);
};
I wrote it in an editor, so I might get it wrong, so how about this?
© 2024 OneMinuteCode. All rights reserved.