Javascript 如何在for循环中设置间隔？

我正在尝试创建一个社交媒体图标菜单，可以滑入和滑出页面。下面的代码可以工作，但速度太快。它看起来不像是在滑动。我想我可以使用

setInterval（）

方法调整计时，但我无法让它工作。这是迄今为止的代码：

var socialMedia = document.getElementById("socialmedia");
var stalkMe = document.getElementById("pleasestalkme");
function SM() {
socialMedia.style.position = "fixed";
socialMedia.style.right = "-330px";
}
SM(); 
stalkMe.addEventListener("click", function(){ 
    if (socialMedia.style.right === "-330px") {
    for (i = -330; i <= -30; i++) {
        var j = i +"px";
        socialMedia.style.right = j;
    }
    } else if (socialMedia.style.right === "-30px"){
            for (i = -30; i >= -330; i--){
        var j = i +"px";
        socialMedia.style.right = j;
    }
    }
}, false); 

var socialMedia=document.getElementById（“socialMedia”）；
var stalkMe=document.getElementById（“pleasestalkme”）；
函数SM（）{
socialMedia.style.position=“固定”；
socialMedia.style.right=“-330px”；
}
SM（）；
addEventListener（“单击”，函数（）{
if（socialMedia.style.right==“-330px”）{
对于（i=-330；i=-330；i--）{
var j=i+“px”；
socialMedia.style.right=j；
}
}
}，假）；

您应该看看CSS转换。基本上，您只需将

right

样式从300px更改为0px，并使用

transition:right 1s您将看到您的元素正在设置动画


否则，您可以看看jQuery。。。。（我感觉很糟糕）。
在解决方案之前，有一句警告：您实际上应该不要使用此代码段。相反，听从floribon的建议，研究css转换

但是，如果您必须以过时的方式进行操作：

for (i = -330; i <= -30; i++) {
    var j = i +"px";
    socialMedia.style.right = j;
}

我在你的代码中任何地方都看不到
setInterval（）；socialMedia.style.right=j；}，100）；}}，false）；非常适合CSS转换，我想远离jQuery，因为我正在尝试掌握基本的javascript，但对于这一点，我认为你建议CSS方式的权利，感谢它的帮助。这是正确的选择：更好地分离逻辑和渲染，以及更好的性能。无法实现这一点，但按照您的建议听floribon，谢谢
var hnd;
i = -330;
hnd = setInterval ( function () {
    var j = i +"px";
    socialMedia.style.right = j;
    i++;
    if (i > -30) {
        clearInterval(hnd); // end activity
    }
}, 50 ); // interval length in ms