2015-02-02 2 views
0

Привет, я, наконец, получил свой индикатор выполнения, как я хочу, есть ли способ заставить его задерживать спайки? как и его фактическая загрузка данных, пока это просто для просмотра на моем сайте, но я бы хотел, чтобы он выглядел аутентичным. это код. максимальная задержка, в которой я нуждаюсь и хочу, составляет 500 миллисекунд.Как добавить случайные всплески задержки к этому?

<html><head> 
    <style> 
     #adLinkb, 
#adLinkb2 { 
    font-size: 12px; 
    color: #fff; 
    font-family:sans-serif; 
} 
    </style> 
</head> 
<body> 
    <div id="adLinkb" style="border: 1px solid black;width:212;background-color:black;border-color:white"></div> 
    <br> 
<div id="adLinkb2" style="border: 1px solid black;width:212;background-color:black;border-color:white"></div> 
    <script type="text/javascript"> 
     function buildBar(id, callback) { 
    var currentAdb = 0; 
    var imgCtb = 70; 

    function cycleb() { 
    var output = ''; 
    for (var i = 0; i < imgCtb; i++) { 
     output += i > currentAdb ? '&nbsp;' : '/'; 
    } 
    output += ''; 
    document.getElementById(id).innerHTML = output; 
    ++currentAdb; 
    if (currentAdb == imgCtb) { 
     window.clearInterval(myInterval); 
     if (typeof callback == 'function') { 
     callback(); 
     } 
    } 
    } 
    var myInterval = window.setInterval(cycleb, 100); 
} 

function callback1() { 
    buildBar('adLinkb2', callback2); 
} 

function callback2() { 
    //window.location... stuff here 
    alert('redirect should go here'); 
} 

buildBar('adLinkb', callback1); 
    </script> 

</body></html> 

ответ

0

Вы можете заменить setInterval с setTimeout и повторно-графика со случайным таймаута

window.setTimeout(cycleb,10+Math.random()*300);

скрипка: http://jsfiddle.net/martijn/qqf90r3f/

альтернативный шип:

if(Math.random()>0.9) 
     { 
      // 10% change on a spike 
       window.setTimeout(cycleb,10+Math.random()*1000); 
     } 
     else{ 
      window.setTimeout(cycleb,10+Math.random()*10); 
     } 

http://jsfiddle.net/martijn/qqf90r3f/1/

+0

sidenote, вы «обманываете» пользователя здесь, показывая прогресс «симуляция». Вероятно, вы не знаете, сколько времени займет запрос, или предоставление реальной системы прогресса невозможно. Рассмотрим использование индикатора неопределенного прогресса. См.: Http://ux.stackexchange.com/questions/21727/indeterminate-progress-indicator-styles – Martijn

+0

Спасибо, но я не вижу изменений, есть ли способ сделать это медленнее и быстрее скорость всплесков? – Tyler

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