jquery delay function

Source: Internet
Author: User

1.setInterval (function () {},[time])

Example: This is a code that simulates a progress bar, and then turns to another page after the end.

<script type= "Text/javascript" >    $(function () {        vari = 0; vart = 0; SetInterval (function () {            if(I < 100) {i= i + 5; T++; $("#linepercent"). CSS ("height", i + "%")); $("#linetime"). Text (t + "'")); }            Else{window.location.href= "Succ.html"; }        }, 1000); });</script>
         <styletype= "Text/css">. Progress{position:Absolute;Z-index: $; Right:20px;Top:20px;        }. Line{width:13px;Height:140px;margin:0 Auto;Background-color:#d6d6d6;Border-radius:20px;        }. Round{width:60px;Line-height:60px;Background-color:#2bc4c2;Border-radius:50%;Font-weight:Bold;Color:#fff;Margin-top:-5px;        }. Line-now{Background-color:#2bc4c2;Border-radius:20px;            /*height:50%;*/Bottom:0px;        }. Font-nr{font-size:15px;Line-height:45px;        }    </style>        <DivID= "ProgressBar"class= "Progress">            <ulclass= "line">                <DivID= "Linepercent"class= "Line-now"></Div>            </ul>            <ulID= "Linetime"class= "Round Font-nr">0 '</ul>        </Div>

2. The code behind an operation delays execution

Set a delay to defer execution of items after the queue.

Delay (duration, [queuename])
An integer of Duration (integer) in milliseconds that sets the time for the queue to defer execution.
QueueName (string) optional argument, string of queue name. The default is animation queue FX.
. Delay () is used to delay the execution of a function in the queue. It can either postpone the execution of functions in the animation queue, or it can be used to customize the queue. Only successive events in the queue can be delayed, so. Show () and. Hide () without parameters have no delay because they do not use the animation queue.

The delay in milliseconds, the larger the number, the slower the animation. The string ' fast ' and ' slow ' represent a delay of 200 and 600 milliseconds, respectively.

For example, we can add a 800 millisecond delay between <div id= "foo" > 's. slideup () and. FadeIn () Animations:

$ (' #foo '). Slideup. Delay (+). FadeIn (400);

When this statement executes, the element will have a 300-millisecond roll-up animation, then pause for 800 milliseconds, and then a 400-millisecond fade-in animation.

The. Delay () is best used in jquery animations or similar queues. However, due to its own limitations, such as the inability to cancel the delay, it should not be used entirely in place of the JavaScript native SetTimeout function, which is more appropriate for normal situations.

3.setTimeout (function () {})

SetTimeout ()

To execute an expression or function from a specified time delay after loading;

Execute only once; use with Window.cleartimeout.
If this function is used, then the example of the first progress bar can be changed to the following example code,

        demoprocess ();         function demoprocess () {            if (i <)                {= i + 5;                T+ +;                $ ("#linepercent"). CSS ("height", i + "%");                $ ("#linetime"). Text (t + "'");            }             Else {                = "succ.html";            }             );        }

All of the above uses the JQuery class library.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.