变量在函数中定义，但需要重新定义

Question

I am using a JQuery mobile plugin and having strange problems with it.

If I use it like below, it works.

    $("#mainPage").on("pageshow", function(e) {

        var availableTags = ['some', 'about', 'tags'];

        $("#searchField").autocomplete({
            target: $('#suggestions'),
            source: availableTags
        });
    });

However if use it like below, it does not work. But cached is defined in the function and correctly shows the id. If I redefine cached in the function it works again. Can anyone explain why?

    var cached = $("#searchField");

    $("#mainPage").on("pageshow", function(e) {

        var availableTags = ['some', 'about', 'tags'];

        //Alert says searchField
        alert(cached.attr('id'));

        //If I uncomment below line it works.
        //cached = $("#searchField");

        cached.autocomplete({
            target: $('#suggestions'),
            source: availableTags
        });
    });

Answer 1

这似乎有效： http ： //jsfiddle.net/9uxtT/它与你的情况有什么不同？

Answer 2

It's a timing issue in the first version you are searching for the tag "#searchField" after pageshow when all jquery modules have been loaded and DOM is complete

In the second version you are searching for the tag whenever the javascript is loaded which might sometimes not even find the #searchfield if the javascript is in the header of the same file.

To complete the answer: Need to take in consideration that JQuery selectors return Objects and not DOM Elements check this code to see that you get two different objects:

 var cached = $("#searchField");
 cached.test = 1;
 $("#p2").on("pageshow", function(e) {
     var test2 = $("#searchField");
 test2.test =2; alert(cached.test +"!="+ test2.test);
 });​ 

Answer 3

$("#searchField") is not defined when you are calling it outside the function, here's the simple way to cache it the first time the handler is called

var cached;

$("#mainPage").on("pageshow", function(e) {
    // This line will only call jQuery once
    cached = cached ||  $("#searchField");

    var availableTags = ['some', 'about', 'tags'];

    alert(cached.attr('id'));

    cached.autocomplete({
        target: $('#suggestions'),
        source: availableTags
    });
});

Here's how to do it without a global variable, by using a self calling function to wrap that variable in a closure

$("#mainPage").on("pageshow", (function(){
    var cached;
    return function(e) {
        // This line will only call jQuery once
        cached = cached ||  $("#searchField");

        var availableTags = ['some', 'about', 'tags'];

        alert(cached.attr('id'));

        cached.autocomplete({
            target: $('#suggestions'),
            source: availableTags
        });
    }
})());