動態增加AJAX加載器的加載百分比

我試圖增加每10秒鐘顯示10％的負載百分比，以便用戶可以看到一些進展。

我使用這個setTimeout函數來每1秒調用一次。

這裏的功能和Fiddle：

$(document).ready(function() { 

    var increase = 10; 
    setTimeout(function() { 
     increase = increase + 10; 
     $("#result").html("<div class='progress progress-striped active' style='width :300px; margin:0 auto;'><div class='bar' style='width: " + increase + "%;'></div></div>"); 
     if (increase == 100) { 
      increase = 10;     
     } 

    }, 1000); 

});

來源

2012-06-28 Viren Rajput

爲什麼不使用['.animate'（HTTP：//api.jquery。 COM /動畫/）？（'$（ 'XXX'）。animate（{width：'100％'}，10000）;'） – ori

setInterval適合我！ –

不是一個真正的答案。爲什麼重新發明輪子？ – ori

要重複一個函數調用，你需要setInterval，不setTimeout。

語法是一樣的，所以你只需要改變這個標記。

但是在這種情況下，你對用戶說謊（可能是可以接受的），你正在做一些現有的jQuery功能的工作，如animate。

來源

2012-06-28 08:05:56

有什麼辦法可以避免這個謊言！並向用戶展示一些真正的進展？ –

不容易。通常的解決方案是簡單地顯示一個清晰的循環指標：它顯示正在進行加載，而不會假裝它知道實際進度。你有一些[有]（http://ajaxload.info/）。 –

問題是，您只需調用setTimeout一次。這很酷，但它只會被調用一次。

通常情況下，當你想調用一個函數每秒多次，您使用setInterval：

var int = setInterval(function() { 
    // do something 
}, 1000);

然而，setInterval將運行每一秒，即使裏面的功能需要2秒的運行（你可以看到重疊問題？）。

這就是爲什麼你可以使用下面的技巧，使用setTimeout：

// Note that I'm naming the function in the setTimeout 
var s = setTimeout(function tick() { 
    // do something that takes a long time, like an ajax call 

    // And finally: 
    s = setTimeout(tick, 1000); 
}, 1000);

請注意，我使用var s或var int能夠使用clearTimeout或clearInterval一旦加載完成。

此外，使用arguments.callee召回相同功能是一個巧妙的技巧，但它是now deprecated。所以我們只是命名這個函數。

的Ajax調用的一個例子：

var s = setTimeout(function tick() { 
    $.ajax({ 
     url: '', 
     success: function(data) { 
      // Sup with the datas? 
      s = setTimeout(tick, 1000); 
     } 
    }); 
}, 1000);

來源

2012-06-28 08:16:57

'//做一些需要很長時間的事情，比如ajax調用。接下來'setTimeout'不會等待ajax完成 – Jashwant

@Jashwant如果你將下一個呼叫放入它，它會。 –

@Jashwant我編輯添加一個例子使用ajax調用:) –

如果您正在使用jQuery，爲什麼不animate();。它有一個原因。它提供流暢，簡單的語法。

此外，您正在一次又一次地將整個標記附加到div#result。應該避免。

試試這個，

CSS：

#result > .progress{ 
    width :300px; 
    margin:0 auto; 
}

的Javascript：

$(document).ready(function() { 
    $('#result').html("<div class='progress progress-striped active'><div class='bar'></div></div>"); 
    $('#result').find('.bar').animate({width:'100%'}, 1000); 
});

來源

2012-06-28 08:22:52 Jashwant

動態增加AJAX加載器的加載百分比

回答

相關問題