2013-08-31 2 views
1

Я пытаюсь построить индикатор прогресса, который после завершения после задержки 0,1 секунды скрывает панель с эффектом клипа, а затем после задержки 0,2 секунды страница загружается google.com ,window.location troubling Код JQuery

Мой код:

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Progressbar - Custom Label</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    .ui-progressbar { 
    position: relative; 
    } 
    .progress-label { 
    position: absolute; 
    left: 50%; 
    top: 4px; 
    font-weight: bold; 
    text-shadow: 1px 1px 0 #fff; 
    } 
    </style> 
    <script> 
    $(function() { 
    var progressbar = $("#progressbar"), 
     progressLabel = $(".progress-label"); 

    progressbar.progressbar({ 
     value: false, 
     change: function() { 
     progressLabel.text(progressbar.progressbar("value") + "%"); 
     }, 
     complete: function() { 
     progressLabel.text("Complete!"); 
     $("#progressbar").delay(100).hide("clip").delay(200); 
     window.location = "http://www.google.com"; 
     } 
    }); 

    function progress() { 
     var val = progressbar.progressbar("value") || 0; 

     progressbar.progressbar("value", val + 3); 

     if (val < 99) { 
     setTimeout(progress, 100); 
     } 

    } 

    setTimeout(progress, 3000); 

    }); 
    </script> 
</head> 
<body> 

<div id="progressbar"><div class="progress-label">Loading...</div></div> 


</body> 
</html> 

Проблема заключается в том, что даже до того, как последствия могут произойти, страница загружается http://www.google.com. Есть какие-то задержки времени, которые я могу использовать.

Спасибо.

ответ

1

Попробуйте с setTimeout

complete: function() { 
     progressLabel.text("Complete!"); 
     $("#progressbar").delay(100).hide("clip").delay(200); 
     setTimeout(function() { 

     window.location.href = "http://www.google.com" 

     }, 2000); 
     } 

Так что ждать в течение 2 сек.

Learn more about SetTimeOut

+0

Спасибо. Но я должен положить этот код чуть ниже '$ (" #progressbar ") .delay (100) .hide (" clip "). Delay (200);' как есть? –

+0

Спасибо за помощь. –

+0

@GaurangTandon Когда вы устанавливаете таймаут, код внутри функции обратного вызова выполняется после задержки, которую вы передали в параметре –

1

JavaScript сильно одновременно язык ... все вещи в основном происходит Simultaniously ...

Правильный способ сделать вещи случилось, следовательно, завернуть последующее код в анонимные функции ..

(function(){ 
    //code executed first here 
})(); 

(function(){ 
    //code executed second here 
})(); 

Или вы можете создавать собственные методы обертки и вызывать их, выполняя изменение местоположения как обратный вызов, когда все закончится.

+0

Ницца, новые знания получили.Спасибо. Но для меня это несколько сложно. –

Смежные вопросы