纯Javascript淡入淡出不起作用

我试图用JavaScript创建淡入淡出函数，但它不起作用。请告诉我我做错了什么。我没有得到过渡效果

var fade_in_btn  = document.getElementById('fade-in'),
    fade_out_btn = document.getElementById('fade-out'),
    fading_div   = document.getElementById('fading-div');

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
        break;
        }
    }
}

fade_out_btn.onclick = function(){
    for (var i=100; i >= 0; i--) {
        sleep(0010);
        opacity_function(i);
    }
}

fade_in_btn.onclick = function(){
    for (var i=1; i <= 100; i++) {
        sleep(0010);
        opacity_function(i);
    }
}

function opacity_function(opacity_value){
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
    console.log(fading_div.style.opacity);
}

var fade\u in\u btn=document.getElementById（'fade-in'），
fade\u out\u btn=document.getElementById（'fade-out'），
Facing_div=document.getElementById（'facing-div'）；
函数睡眠（毫秒）{
var start=new Date（）.getTime（）；
对于（变量i=0；i<1e7；i++）{
如果（（新日期（）.getTime（）-start）>毫秒）{
打破
}
}
}
淡出\u btn.onclick=函数（）{
对于（变量i=100；i>=0；i--）{
睡眠（0010）；
不透明度函数（i）；
}
}
淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入{
对于（var i=1；i这是一个纯JS答案，不使用
requestAnimationFrame
，但我选择放弃你的sleep函数，因为这是一个奇怪的选择和糟糕的做法（而且你的不起作用。还要注意，JS中不可能有真正的
sleep
）
这项工作：

fade_out_btn.onclick = function(){
    var i = 100; 
    var myint = setInterval(function(){
        opacity_function(i);
        i--; 
    if (i<0) clearInterval(myint);
       console.log(i);
    },10); //this is the number of ms between iterations of the codeblock in my setInterval function
}

注意两件事：

1-我将I的定义拉到函数外部。您必须从函数外部获取要递减的值，因为淡出的起始值可能并不总是100，而是设置为不透明度的当前值，即
淡出_div.style.opacity*100


2-我将回调绑定到onclick。


关于在
setInterval
和
setTimeout
之间进行选择：

setInterval
和
setTimeout
都只是计划代码的执行。
setInterval
从执行时起每x毫秒计划一次事件，而一系列链式的
setTimeout
s计划一个事件在x毫秒内，然后再次执行，然后在x毫秒内计划另一个事件。因此，在setTimeout的verhead，因为实时间隔为
x+（执行代码块一次所需的时间）
。如果执行一次所需的时间大于指定的时间间隔，则使用
设置间隔可能会出现问题，但这不会影响像您这样的简单程序。请参见
]
您的睡眠功能=错误做法。使用设置超时来执行循环。我从stackoverflow复制/粘贴问题@user3187056-我发现你的评论太可笑了，我不得不投了赞成票。如果你想学习纯JS动画而不使用requestAnimationFrame（一开始可能有点混乱），请将代码改为使用
setInterval
而不是sleep函数-这很麻烦，计算成本很高（总是避免使用额外的
if
语句）而且你不会学到很多关于在JS中编程的知识，使用iTunesing
setTimeout
，正如epascarello所提到的，比
setInterval
更好。你知道为什么我的代码不能实现转换效果吗？@user3187056 JAvascript的睡眠函数是为了“模拟”处理器负载，但它没有。如果您环顾四周，建议使用setTimeout和setInterval。哦，sry我没有注意到。感谢您理解为什么JS中没有睡眠功能。@Dany请给我一个setTimeout的例子
var i = 100; 

function fadeout(){
var myint = setTimeout(function(){
    opacity_function(i);
    i--; 
if (i>0) fadeout(); 
},10);
}

fade_out_btn.onclick = fadeout;