Question

在发现我无法在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。

Answer 1

您可以通过将字符串'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/

SetInterval减慢速度

注意事项

1 个答案: