1

我用 jQuery 跨越段落的每个字符，以便稍后对其进行动画处理。

// span each character
$('#testText p').children().andSelf().contents().each(function(){
    if (this.nodeType == 3) {
        var $this = $(this);
        $this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
    }
});

// store each span
$spanCharacters = $('#testText p span');

我有大约 800 个字符。它变得非常缓慢......我想知道是否有任何方法可以让它更快。

就像现在它为每个跨度创建一个样式：

<span style="position: relative; top: 8.763065797205456px; left: 0px;">i</span>

可以直接换位置吗？

这是完整的代码，请注意我关闭了 draw 方法！

如果您打开它，请注意事情进展缓慢。

var TWO_PI = 6.2831855;

var frameCount = 0;

var $spanCharacters = new Array();

$(document).ready(function() {   

    // span each character
    $('#testText p').children().andSelf().contents().each(function(){
        if (this.nodeType == 3) {
            var $this = $(this);
            $this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
        }
    });

    // store each span
    $spanCharacters = $('#testText p span');

    //var handle = setInterval(draw, 80);
    draw();

});



function draw() {
    frameCount++;

    var width = 500;


    $spanCharacters.each(function() {

        var offsetLeft = $(this).offset().left;
        var offsetTop = $(this).offset().top;

       var posLeft = $(this).position().left;

       var a = map(posLeft+frameCount, 0, width/5, 0, TWO_PI);
       var c = Math.cos(a);

        var addOffset = c*10;
        //console.log(addOffset);

       $(this).offset({ top: offsetTop+addOffset, left: offsetLeft });

    });
}

function map(value, istart, istop, ostart, ostop) {
    return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
 }

简而言之，如何加快速度？

http://jsfiddle.net/LwD42/4/

4

3 回答 3

3

$.offset()做了很多你可能不需要的检查。您还应该缓存您的 jQuery 对象，而不是不断地重新创建它们。例如：

替换$(this)为var self = $(this)并调用self. 每次你使用$()函数 jQuery 都会创建另一个对象。

您可以执行以下操作，这会更快：

$spanCharacters.each(function() {
   var a = map(this.offsetLeft + frameCount, 0, width/5, 0, TWO_PI);
   var c = Math.cos(a);

   var addOffset = c * 10;

   this.style.position = "relative";
   this.style.top = addOffset + "px";
});

http://jsfiddle.net/LwD42/9/

这是比较两者的性能测试：http: //jsperf.com/span-position-speed-test/ 这个版本在我的浏览器中大约快两倍。它仍然相对较慢，但这总是会在您编辑如此大量的 DOM 元素时出现。

于 2013-05-29T14:16:32.557 回答
0

作为@George Reith 回答的补充。您可以将字符串操作优化为一个 DOM 插入：

 // span each character
var text = "", 
    topOffset = 0;
$('#testText p').children().andSelf().contents().each(function(){
    if (this.nodeType == 3) {
        var $this = $(this);
        text += $this.text().replace(/(\w)/g, "<span>$&</span>");
    }
}).replaceWith(text);
于 2013-05-29T14:53:11.370 回答
0

您可以更改帧数以移动超过 1 

function draw() {
frameCount+=10;
var width = 500;
$spanCharacters.each(function() {
   var offsetLeft = $(this).offset().left;
   var offsetTop = $(this).offset().top;
   var posLeft = $(this).position().left;
   var a = map(posLeft+frameCount, 0, width/5, 0, TWO_PI);
   var c = Math.cos(a);
   var addOffset = c*10;
   $(this).offset({ top: offsetTop+addOffset, left: offsetLeft });
});
}

我使用 .animate 设置这个jsfiddle的顶部

于 2013-05-29T16:17:39.200 回答