SetInterval slowing down

SetInterval slowing down

本文关键字：down slowing SetInterval      更新时间：2023-09-26

在发现我不能在Javascript中使用供应商前缀后，我尝试自己制作渐隐模糊。脚本运行大约5-10秒后，console.log调用速度减慢到每秒一次左右。这是我的问题吗?

这是我写的代码

var i = 0;
var iv = setInterval(function(){
    if(Number(i) > 2)
    {
        clearInterval(iv);
    }
    console.log(i);
    r = i.toFixed(2);
    $('#r').css('filter', 'blur(' + r + 'px)');
    $('#r').css('-webkit-filter', 'blur(' + r + 'px)');
    $('#r').css('-moz-filter', 'blur(' + r + 'px)');
    $('#r').css('-o-filter', 'blur(' + r + 'px)');
    $('#r').css('-ms-filter', 'blur(' + r + 'px)');
    i += 0.01;
}, 1);

和一个JSFiddle

我猜这是JS处理浮点数的方式，也有什么办法让淡出模糊更平滑?一旦i靠近0.8，它就会变得很不稳定。我如何修复setInterval上的第二次延迟?还有人能复制这个吗?

注意事项

当尝试使用for循环执行相同的操作时，也会发生同样的事情，但它也会使页面变得无用，直到循环停止时到达2。

你可以通过缓存字符串'blur(' + r + 'px)'的计算到一个javascript变量中，从而使脚本更快，并节省不必要的计算。

你也可以缓存$('#r')对象到一个javascript变量，甚至使用jquery css多字属性:$('#r').css({propertyName: value, propertyName: value})

类似:

    var calc = 'blur(' + r + 'px)';     
    $('#r').css({
        'filter' :  calc ,
        '-webkit-filter' : calc,
        '-moz-filter' : calc,
        '-o-filter' : calc,
        '-ms-filter' : calc
    });

点击这里查看:http://jsfiddle.net/gMq3P/3/

相关文章：