Setting controller variables not reliable from apex:commandButton

I'm trying to set a variable inside my controller via an actionFunction, which is called by some Javascript, which is initially called by either by an actionPanel (with styleClass='btn') or a commandButton.

If the caller is the actionPanel then the variable updates reliably. However with the commandButton I can see the updated value flash briefly before reverting to its previous value. Maybe one out of every six clicks of the button actually causes the new value to stick. Sometimes it can take a dozen or more tries, regardless of click frequency.

Can someone please explain what's going on here?

PAGE

<apex:page controller="MyController">
    <apex:form >
        <apex:outputPanel id="panel">
            <apex:outputText value="MyString = {!MyString}"/>
            <apex:actionFunction name="SetString" rerender="panel">
                <apex:param name="param1" value="" assignTo="{!MyString}"/>
            </apex:actionFunction>
            <script>
                function JSetString() {
                    SetString('{!MyString}' + '.');
                }
            </script>
            <apex:outputPanel onclick="JSetString()" styleClass="btn">
                Grow {!MyString} (works)
            </apex:outputPanel>
            <apex:commandButton onclick="JSetString()" value="Grow {!MyString} (unreliable)" rerender="panel"/>
        </apex:outputPanel>
    </apex:form>
</apex:page>

CONTROLLER

global class MyController {

    public MyController() { MyString = 'hello'; }

    public String MyString {get;set;}
}