如何在.5秒内连续更改DOM元素文本：想要创建像marquee一样的自定义文本滚动条

Question

我想创建一个文本滚动条。它将像一个选框（朝左方向）工作。为此，我使用了以下逻辑：

1. 剥去第一个字符串字符。
2. 将其附加到字符串末尾。
3. 使用更新的字符串值更新DOM（继续此过程）。

但没有成功。 DOM元素没有得到更新。

<p id="para" style="display: inline-block;">this is para 1</p><br />
<a onclick="scrolltext()">Scroll Text</a>

    var str = ' '+document.getElementById('para').innerHTML;
    var len = original_len = str.length;
    function scrolltext(){

            while(len>-1){
                 var char_start = str.charAt(0)
                 str = str.substr(1);
                 str = str+''+char_start;
                 setTimeout(function(){
                     document.getElementById('para').innerHTML = str;                       
                     len--;
                     if(len == 0) 
                       len = original_len;
                 }, 500);

            }
    }