我該如何等待在javascript中執行事件

-1

我試圖製作一個搜索Twitter的特定主題標籤的程序，以及是否有與其相關的圖像顯示圖像。我該如何等待在javascript中執行事件

我想弄清楚是否有可能在屏幕上留下一張圖片很短的時間，比如5秒左右。目前每個事件都會發布新圖像。我嘗試使用setTimeout，但我似乎無法得到它的工作。我不知道這是否可能，因爲它們是事件，但我對JavaScript並不太熟悉。我試着用google搜索堆棧溢出，但是我找不到與此有關的任何東西。預先感謝您的回覆。我很抱歉，如果這個問題似乎是關於使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>

我相信這與建議的做法類似，但我只是在客戶端做了一個快捷方式。謝謝你的答案。

來源

2016-03-03 alphamonkey

請告訴我們用'setTimeout'你嘗試 – Bergi

你有正確的想法，但需要一些小的更改才能使其工作。

問題是您的代碼正在創建多個獨立的定時器。圖像更新不相互協調。所以一個解決方案是創建一個更新圖像的單箇中央計時器。在我的示例中，您將圖像（url）添加到數組緩衝區。計時器然後按照它們被添加的順序將它們拉出（移位）。有很多方法可以做到這一點，但這應該讓你開始正確的方向。

運行的代碼片段嘗試

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');

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

來源

2016-03-03 09:34:56 Roberto

我該如何等待在javascript中執行事件

回答

相關問題