Wait for a Few Seconds Before Running Next Step Protractor

What function do you use to wait for a few seconds before running next step in protractor. I have a span with a text and I want to wait for the text to be changed from an external source before I check for it again.

HTML:

<div class="panel">
    <button type="submit" onclick="promptTransaction()">Load Transaction</button>
    <button type="submit" onclick="handleMessage()">Post Message</button>
    <select name="messageType" class="messageType">
        <option>Submit</option>
        <option>Amount</option>
    </select>
    <div class="message-box"><b>Sending message to hosted page:</b><span class="message-out">waiting...</span></div>
    <div class="message-box"><b>Receiving message from hosted page:</b><span class="message-in">waiting...</span></div>
</div>

so when I click the 'post message' button, I should receive a new text from external source and change the span with a classname 'message-in'.

Currently, my test looks like this:

        element(by.cssContainingText('button','Post Message')).click().then(function() {

            //WAIT FOR 10 seconds

            element(by.css('.message-box .message-in')).getText().then(function (text) {
                var response = JSON.parse(text);

                expect(response.type).toBe('msax-cc-result');
                expect(response.value.Transaction).toBe('Tokenize');
                expect(response.value.CardToken).not.null();
            })
        });

Also, in the text result that is returned from external source, I converted it to json object, but can't since there is a '\' on it, is there a way to remove it before converting it into an object.

passed data:

{"type":"msax-cc-result","value":"{\"Transaction\":\"Tokenize\",\"CardToken\":\"ba9c609f-45fc-49aa-b8b2-ecaffbc56d43\"}"}