Question

我试图制作一个程序，在Twitter上搜索特定的主题标签，如果有与之相关的图像则显示图像。

我试图弄清楚是否可以在屏幕上留下一段短暂的时间，比如5秒左右。目前，每个事件都会发布新图像。我尝试使用setTimeout但我似乎无法让它工作。我不知道这是否可能，因为它们是事件，但我不太熟悉javascript。我试着谷歌搜索并搜索堆栈溢出但我找不到任何与此有关的东西。提前感谢您的回复。如果这个问题似乎是关于让javascript等待的另一个问题，我道歉。以下是代码

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

TwitterPackage = require('twitter');
Open = require('open');

var secret = {
    consumer_key: 'key',
    consumer_secret: 'secret',
    access_token_key: 'token_key',
    access_token_secret: 'token_secret'
}


var Twitter = new TwitterPackage(secret);
var images = []

Twitter.stream('statuses/filter', {track: '#someTag'}, function(stream) {
  stream.on('data', function(tweet) {
    var url = tweet.entities.media[0]       
    if (url.media_url){
        if (images.indexOf(url.media_url) < 0){
            io.emit('change picture', url.media_url, tweet.text);
            images.push(url.media_url);
            //What I tried for timeout
            /*
            comment out the above io.emit
            then call 
            displayImage(url.media_url);
            */
        }
    }
  });

  stream.on('error', function(error) {
    console.log(error);
  });

});

//What I tried for setTimeout
function displayImage(url){
    setTimeout(function(){
        io.emit('change picture', url);//, tweet.text);
    }, 5000)
}

我根据您的要求添加了我为setTimeout尝试的内容。它延迟但它基本上只是将所有内容设置为落后它应该是5秒，而不是每张图像延迟5秒。

我最终能够修复客户端。

    <script type="text/javascript">
        var images = [];
        var tweets = [];
        var socket = io();
        $(document).ready(function(){
            socket.on('change picture', function(url, text){
                images.push(url)
                tweets.push(text);
            });
            var DELAY = 5000;
            setInterval(function(){
                if (images.length >= 1){
                    var currImage = images.pop(0);
                    var currTweetText = tweets.pop(0);
                    $('#imageView').attr('src', currImage);
                    $('#tweetText').text(currTweetText);
                    console.log(currImage);
                    console.log(currTweetText);
                }
                console.log('LENGTH:' + images.length);
            }, DELAY);
        });
    </script>

我相信这与建议的方式相似，但我只是在客户端做了一个快捷方式。谢谢你的回答。

Answer 1

你有正确的想法，但需要做一些小改动才能使它发挥作用。

问题是您的代码正在创建多个独立的计时器。图像更新不相互协调。因此，一种解决方案是创建一个更新图像的中央计时器。在我的示例中，您将图像（url）添加到数组缓冲区。然后计时器按照添加顺序将它们拉出（移位）。有很多方法可以做到这一点，但这应该让你开始正确的方向。

运行代码段以尝试

＆＃13;

var images = [];

// append images to the buffer
function addImage(url) {
  images.push(url);
  if (!window.image.src) updateImage();
}

// central timer 
function updateImage() {
  if (images.length > 0) {
    window.image.src = images.shift();
    window.caption.innerHTML = (new Date()).toTimeString();
  }
}

// start the timer
setInterval( updateImage, 4000);


// add some test images
addImage( 'http://lorempixel.com/g/200/100/sports');
addImage( 'http://lorempixel.com/g/200/100/food');
addImage( 'http://lorempixel.com/g/200/100/animals');
addImage( 'http://lorempixel.com/g/200/100/city');
addImage( 'http://lorempixel.com/g/200/100/nightlife');

＆＃13;

  <img id="image">
  <div id="caption"></div>

＆＃13;

我如何等待在javascript

1 个答案: