Question

我正在创建一个基于Twitter API 1.1的应用程序。用户定义的Twitter个人资料图像被拉入并显示在应用程序中，一旦点击，将显示特定帐户的最新推文。目前，此过程是在点击时启动的，使用AJAX和“for each”循环查找并显示包含在单独的php页面中的正确推文。

虽然此过程运行正常，但一旦用户点击了个人资料图片，该应用程序需要太长时间才能加载所需的推文。我需要一些关于如何优化加载推文的过程的建议？也许它可能不需要依赖于点击，但我只是不确定如何优化我的代码。

任何帮助将不胜感激。

以下是帮助您理解的代码：

根据特定的个人资料图片启动最新推文的代码：

// Create all Tweeter objects
foreach ($tweeters as $i => $tweeter){
$tweeters[$i] = new Tweeter($tweeter, $tmhOAuth);
}

// Display all Tweeters
foreach ($tweeters as $tweeter){
$r+=1;
echo '<a class="fancybox fancybox.ajax" href="tweets.php #' . $r . '">';
echo '<img class="tweetTime' . $r . '" id="' . $r . '" src="' . $tweeter->getImage() . '" width="240px" height="240px" /></a>';
}

将推文放在单独页面中的代码：

require_once('config/FrameFunctions.php');

foreach ($tweeters as $i => $tweeter){
$tweeters[$i] = new Tweeter($tweeter, $tmhOAuth);
}

foreach ($tweeters as $tweeter){
$r+=1;
echo '<div id="' . $r . '"><p>Latest tweet from <b>' . $tweeter->getName() . '</b>:<br />';

foreach ($tweeter->getTweets() as $tweet){
    echo $tweet['text'] . '<br />';
    echo "Sent: <b>" . $tweet['created_at'] . "</b></p></div>";
 }
}

Answer 1

您需要将推文检索与用户点击分离。将AJAX移动到JQuery ajax（）调用集以间隔运行。添加一个隐藏元素来保存最新的推文，并使用AJAX调用的结果更新它。同时更改fancybox调用以使用隐藏元素的内容，而不是让fancybox进行AJAX调用。

主要HTML：

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
            <script src="scripts/jquery.fancybox.js"></script>
            <link rel="stylesheet" type="text/css" href="scripts/jquery.fancybox.css?v=2.1.4" media="screen" />
        </head>
        <body>

            <script type="text/javascript">
            $(document).ready(function() {

                         $('.fancybox').fancybox();
                /*
                 *  call ajax function and update latest
                 */     

                            var refreshTweets = function() {
                              console.log("updating..");
                              $.ajax({url:"updatetweets.php",success:function(result){
                                tweets = eval(result);
                                for(i=0;i<tweets.length;i++){
                                    $("#latesttweet"+(i+1)).html(tweets[i]);      
                                }

                              }});
                            }
                            //set the time in milliseconds here for each refresh
                            setInterval(refreshTweets , 30000); //Interval


                    });  
            </script>
    <?php

    //Setting up objects, you won't need this part
    $tweeters = array("one", "two", "three");
    $tmhOAuth = 0;
    $r =0;

    Class Tweeter{
        function __construct(){
            return array("bob", "sue", "derek");
        }

        function getImage(){
            return "images/turpin.gif";
        }
    }
    //end set up objects


     // Create all Tweeter objects
    foreach ($tweeters as $i => $tweeter){
        $tweeters[$i] = new Tweeter($tweeter, $tmhOAuth);
        }

        // Display all Tweeters
        foreach ($tweeters as $tweeter){
        $r+=1;
        echo '<a class="fancybox" href="#latesttweet' . $r . '">';
        echo '<img class="tweetTime' . $r . '" id="' . $r . '" src="' . $tweeter->getImage() . '" width="240px" height="240px" /></a>';
        echo '<span id="latesttweet'. $r .'" style="display: none;">Tweet text will go here</span>';
    }

    ?>

    </body>
    </html>

更新推文代码（Ajax php）：

    <?php
    //Setting up objects, ignore this part
    $tweeters = array("bob", "sue", "derek");
    $tmhOAuth = 0;
    $r =0;

    Class Tweeter{
        private $thetweeter;

        function __construct($tweeter){
            $this->theTweeter =  $tweeter;
        }    

        function getTweet(){
            return $this->theTweeter  . "'s tweet at ". date('H:i:s') ;
        }
    }
    //end set up


    foreach ($tweeters as $i => $tweeter){
        $theTweeter = new Tweeter($tweeter, $tmhOAuth);
        $tweeters[$i] = $theTweeter->getTweet();
    }

    header("Content-type: application/json");
    echo json_encode($tweeters);
    ?>

如何优化“for each”循环中加载数据的过程？

1 个答案: