javascript - 在 `.ajax`之外定义一个json解析函数

Question

<强> Fiddle Example

我正在开发 chained selectbox通过 Ajax 填充选项并使用 localStorage 保存返回的数据。代码可以工作，但我想稍微简化一下代码。

我想知道是否可以将两个 $.each 函数定义为 ajax 代码之外的函数，并在 success 函数中回调它，例如 this example ，但棘手的部分是，返回的数据在ajax成功函数中定义为data，而从localStorage定义为key。

失败代码:

function loop(){
$.each(data.query.results.json.json, function (index, i) {         
      smallchoice = i.choice.split('|');
        $.each(smallchoice,function(j,smallchoice){
           $option = $("<option/>").attr("value", smallchoice).text(i.bigcat + "@" +( i.cat || "") +"@" +  smallchoice);
           $select.append($option); 
         });          
});                    
$select.dynamicDropdown({"delimiter":"@"});
}


$('select').each(function(loop){
    $(this).one("mouseenter",function(){
     var name = $(this).data('name'),
         key = JSON.parse(localStorage.getItem(name)),
         $select = $('select');var $option="";

     $(this).addClass('yellow');

     if (!key) {
       $.ajax({
        url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fcheapgamessales.com%2F133.json%22&format=json&diagnostics=true&callback=", 
        success: function(data){
          localStorage.setItem(name, JSON.stringify(data));
          loop(data);
        } 
      });
     }
     else{         
         loop(key);            
     }

});
});

原始工作代码:

$('select').each(function(){
    $(this).one("mouseenter",function(){
     var name = $(this).data('name');
     var key = JSON.parse(localStorage.getItem(name));
     var $select = $('select');var $option="";
     $(this).addClass('yellow')  
     if (!key) {
       $.ajax({
        url: url, 
        success: function(data){
          localStorage.setItem(name, JSON.stringify(data));

          $.each(data.query.results.json.json, function (index, i) {         
            smallchoice = i.choice.split('|');
              $.each(smallchoice,function(j,smallchoice){
                 $option = $("<option/>").attr("value", smallchoice).text(i.bigcat + "@" +( i.cat || "") +"@" +  smallchoice);
                 $select.append($option); 
              });          
          });                    
         $select.dynamicDropdown({"delimiter":"@"});
        } 
      });
     }
     else{
           $.each(key.query.results.json.json, function (index, i) {         
             smallchoice = i.choice.split('|');
           $.each(smallchoice,function(j,smallchoice){
             $option = $("<option/>").attr("value", smallchoice).text(i.bigcat + "@" +( i.cat || "") +"@" +  smallchoice);
             $select.append($option); 
       });
    });
           $select.dynamicDropdown({"delimiter":"@"});         


    }

  }); // end one function
});

Answer 1

像这样吗？

function loop(data, $select){
    $.each(data.query.results.json.json, function (index, i) {         
            smallchoice = i.choice.split('|');
              $.each(smallchoice,function(j,smallchoice){
                 $option = $("<option/>").attr("value", smallchoice).text(i.bigcat + "@" +( i.cat || "") +"@" +  smallchoice);
                 $select.append($option); 
              });  
    });

}

$('select').each(function(){
    $(this).one("mouseenter",function(){
     var name = $(this).data('name');
     var key = JSON.parse(localStorage.getItem(name));
     var $select = $('select');var $option="";
     if (!key) {
       $.ajax({
        url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fcheapgamessales.com%2F133.json%22&format=json&diagnostics=true&callback=", 
        success: function(data){
          localStorage.setItem(name, JSON.stringify(data));

          loop(data, $select);                   
         $select.dynamicDropdown({"delimiter":"@"});
        } 
      });
     }
     else{
         loop(key, $select);
         $select.dynamicDropdown({"delimiter":"@"});            
    }   
});
});