jQuery width（％）不会停止在windowResize上计算？

Question

这是我的代码：

http://jsfiddle.net/7cXZj/

    var callback = function () {

  $('.progress-bar').width($('.progress-bar').parent().width() - 190);


  $(".mainpart-background").animate({ width: "80%" }, 800 , function(){
    var sidepartposition = $(".progress-bar").width() * 0.1 + $(".sidepart-content").width() * 0.5 ;
   $(".sidepart").animate({ "margin-right": - sidepartposition }, 100); 
   });

};
$(document).ready(callback);
$(window).resize(callback);


var sidepartpositionResize = $(".progress-bar").width() * 0.1 + $(".sidepart-content").width() * 0.5 ;

$(window).resize(function(){

   $(".sidepart").css( "margin-right", "sidepartpositionResize" );

});

这就是问题：

调整窗口大小时，显示“20％”的跨度消失。 为什么？ 用Firebug检查它你会看到jQuery不会停止计算80％，它会从80.00213到79.1241到79.12523 ...依此类推。 1-4秒后突然间，这个奇怪的过程完成了。 然后出现2​​0％的跨度内容。

请注意：此代码适用于响应式网站。

我是JS的初学者。 非常感谢你的帮助！

Answer 1

试试这个代码： http ： //jsfiddle.net/7cXZj/5/

此代码允许您绑定到resize事件的结尾，而不是在调整窗口大小期间多次执行该函数。

var animate = function(){
console.log('animando');
$(".mainpart-background").css('width', 0);
$(".mainpart-background").animate({
        width: "80%"
    }, 800, function () {
        var sidepartposition = $(".progress-bar").width() * 0.1 + $(".sidepart-content").width() * 0.5;

        $(".sidepart").animate({
            "margin-right": -sidepartposition
        }, 10);
    }
);    
}

window.resizeEvt;

$(document).ready(function(){
animate();

$(window).resize(function()
{
    clearTimeout(window.resizeEvt);
    window.resizeEvt = setTimeout(function()
    {
        animate();
    }, 250);
});
});

希望能帮助到你。