Javascript 根据方向变化调整拉斐尔画布的大小

我有以下问题： 我在一个div中创建了一个Raphael画布。一旦加载页面并调用initRadar函数，就会发生这种情况：

var r;
var paper;
var c;
function initRadar(){
    r = $( "#circ" );
    paper = Raphael("circ", r.width(), r.height());
    c = paper.circle(r.width()/2, r.height()/2, r.height()/2-2);
    $(window).on("orientationchange",function(){
        //redraw(); // <--- the way I wanted it
        setTimeout(function(){ redraw(); }, 300); // <--- *yuck*
    }); 
}

每当方向改变时，此函数都会重新绘制内容。这也行得通。。。几乎问题是，我有比赛条件。即使触发了方向更改事件，circ div仍保持原来的大小和位置。这会导致一种奇怪的效果，即当视口处于纵向模式时，会绘制风景圈，反之亦然

我目前的解决方案是使用超时函数恶心，等待几毫秒，以便在绘制圆之前完成布局。这是可行的，但它很难看，我不想在我的代码中有这样的黑客行为

有人能告诉我如何正确解决这个问题吗

function redraw(){
    c.remove();
    c = paper.circle(r.width()/2, r.height()/2, r.height()/2-2);
}