$ .each范围内的Javascript AJAX范围 [英] Javascript AJAX scope inside of $.each Scope

问题描述

因此，我尝试遍历某些元素并根据ajax调用的结果更改某些文本.问题是我无法从ajax回调中获取数据，并且不确定如何正确链接事件.我得到一个股票报价值，如果我可以将该对象返回到之前的作用域，匹配循环，然后在那里进行所有操作，那将是很好的选择.

So I am trying to loop through some elements and change some text based on the result of an ajax call. the problem is I cannot get the data out of the ajax callback and I am not sure how exactly to chain the events to do so. I am getting a stock quote value it would be nice if I could just return that object up into the previous scope, the loop of matches, and then do all the manipulation there.

$(function(){
          var tweets = $('.tweet');
          var symbol_pat = /(^|\s\$)([a-z]+\b)/gi;
          $.each(tweets, function(){
            var tweet_html = $(this).html();
            tweet_html = tweet_html.replace(symbol_pat,function(){
               var symbol = arguments[2];
               var YAHOO_API_URL = 'http://query.yahooapis.com/v1/public/yql'
               var format = 'json'
               var query = 'select * from yahoo.finance.quotes where symbol in ("'+symbol+'")';
               var env = "store://datatables.org/alltableswithkeys";

               $.ajax({
                    'url':YAHOO_API_URL,
                    'async':false,
                    'method':'GET',
                    'data': {
                        'format':format,
                        'q':query,
                        'env':env
                    },
                    success: function(data){
                        var quote = data.query.results.quote;
                        var change = quote.Change;
                        var change_pct = quote.ChangeinPercent;
                        var quote_price = quote.LastTradePriceOnly;
                        var html_str = "";

                        if( change.indexOf("+") != -1 ){
                            html_str = '<span class="symWrap up">'+arguments[0]+'</span>';
                        }else{
                            html_str = '<span class="symWrap down">'+arguments[0]+'</span>';
                        }

                        tweet_html = arguments[0].replace(html_str);
                        $(this).html(tweet_html);
                    }
               });

            });
          });

        });

推荐答案

$.ajax()异步运行，因此您不能真正地等待"在上一个范围内获得成功.您可以使用jQuery promise和Deferred来做到这一点.查看 http://www.erichynds.com/jquery/using-deferreds- in-jquery/和 http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

$.ajax() runs asynchronously, so you can't really "wait" for the success in the previous scope. You can use jQuery promise and Deferred to do this though. Check out http://www.erichynds.com/jquery/using-deferreds-in-jquery/ and http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

编辑: 显示不需要承诺或延期的替代解决方案:

EDIT: showing an alternate solution that doesn't require promise or deferred:

$(function(){
  var tweets = $('.tweet');
  var symbol_pat = /(^|\s\$)([a-z]+\b)/gi;
  $.each(tweets, function(){
       var that = this;

       var symbol = arguments[2];
       var YAHOO_API_URL = 'http://query.yahooapis.com/v1/public/yql'
       var format = 'json'
       var query = 'select * from yahoo.finance.quotes where symbol in ("'+symbol+'")';
       var env = "store://datatables.org/alltableswithkeys";

       $.ajax({
        'url':YAHOO_API_URL,
        'async':false,
        'method':'GET',
        'data': {
        'format':format,
        'q':query,
        'env':env
        },
        success: function(data){
        var quote = data.query.results.quote;
        var change = quote.Change;
        var change_pct = quote.ChangeinPercent;
        var quote_price = quote.LastTradePriceOnly;
        var html_str = "";

        if( change.indexOf("+") != -1 ){
            html_str = '<span class="symWrap up">'+arguments[0]+'</span>';
        }else{
            html_str = '<span class="symWrap down">'+arguments[0]+'</span>';
        }

            var tweet_html = $(that).html();
                var tweet_html = arguments[0].replace(html_str);
            tweet_html = tweet_html.replace(symbol_pat,html_str);
        $(that).html(tweet_html);
        }
       });

    });
  });

});

这篇关于$ .each范围内的Javascript AJAX范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！