代码之家 › 专栏 › 技术社区 › David Fox

如何缓存jquery选择?

jquery-selectors caching jquery javascript

David Fox · 技术社区 · 14 年前

我需要缓存大约100个不同的动画选择。下面是示例代码。第二个示例中有语法问题吗?如果这不是这个作为缓存选择的方式,它当然是InterWebs上最流行的。那么,我错过了什么?

注: 磷在 $.path.bezier(p) 下面是传递给jquery.path.bezier的正确声明的对象(顺便说一下,这是一个很棒的动画库)

这个作品

    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $('#image1').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $('#image2').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

这个 不工作

    var $one = $('#image1'); //problem with syntax here??
    var $two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

5 回复 | 直到 14 年前

Sean Vieira 13 年前

如果调用时未加载图像,jquery将返回空对象。将你的作业移到 document.ready 功能:

$(document).ready(function() {
    var $one = $('#image1');
    var $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

如果需要缓存它们以供以后在初始化脚本之外使用,请将它们添加到存储对象中:

var my_storage_object = {};
$(document).ready(function() {
    var $one, $two;
    my_storage_object.$one = $one = $('#image1');
    my_storage_object.$two = $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

后来,在外面 准备好文件 你可以打电话:

my_storage_object.$one //still has a reference to the jQuery object.

fmsf 14 年前

   var one = $('#image1');
   var two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

修理

当你这样做的时候:

   var one = $('#image1');

您正在将选择器返回的jquery对象存储在var“one”中。所以你不需要再使用美元了。

marapet 14 年前

试试这个:

var $one;
var $two;
$(document).ready(function() {
    $one = $('#image1');
    $two = $('#image2');
    animate1();
    animate2();
})
function animate1() {
    $one.animate({ path: new $.path.bezier(p) }, 3000);
    setTimeout("animate1()", 3000);
}
function animate2() {
    $two.animate({ path: new $.path.bezier(p) }, 3000);
    setTimeout("animate2()", 3000);
}

变量是在全局范围内定义的,但是选择器在文档准备就绪时执行。

dain 14 年前

变量声明也应该在外部,但选择器应该在$(document.ready()内部,否则这些图像可能还没有准备好?

编辑,如下所示:

var one;
var two;
$(document).ready(function() {
     one = $('#image1');
     two = $('#image2'); 
     animate1();
     animate2();
})

jasongetsdown 14 年前

您的jquery选择器始终需要位于 .ready() 阻止,为什么不放一切那里?这样你就不会在全球范围内留下任何东西。

$(document).ready(function() {
    var storedGlobals = {
        $one: $('#image1'),
        $two: $('#image2')
    };
    animate1(); 
    animate2(); 

    function animate1() { 
        storedGlobals.$one.animate({ path: new $.path.bezier(p) }, 3000); 
        setTimeout("animate1()", 3000); 
    } 
    function animate2() { 
        storedGlobals.$two.animate({ path: new $.path.bezier(p) }, 3000); 
        setTimeout("animate2()", 3000); 
    }
});