Question

我有一个表单，当单击router.post()时，它会通过start button启动流。单击开始按钮时。
单击停止按钮时，我发出一个插座event，该插座将停止从服务器流式传输。
我使用on_stream布尔值设置启动/停止流的true / false标志。

问题：：第一次单击开始/停止按钮时，流将正确启动和停止。 第二次，当开始按钮单击router.post（）正在将TWICE发布到服务器。当停止时单击按钮，套接字事件将发出两次。

从这一点开始，“开始/停止”按钮按指数形式触发多个发布请求（“开始”）和套接字事件（“停止流”）。正在崩溃代码...

第二次启动和停止后控制台（多个发布和套接字事件）

Stoping Stream...
SOCKET DEF: true
Closing stream...
close stream:  false
startz undefined
POST DEF: false
startStream DEF: true
starting stream...
POST / 200 12.608 ms - 4
startz undefined
POST DEF: true
startStream DEF: true
starting stream...

浏览器控制台（事件被多次触发）：https://imgur.com/a/RDGR9mm

index.js

module.exports = function(io) {
  let _stream = {};
  let on_stream = false;

 router.post('/', async (req, res) => {
    // console.log("raw obj " + req.body.searchTerm);
    console.log("startz " + req.body.startBtn);
    console.log("POST DEF:", on_stream);

    startStream(req.body.searchTerm);

    res.send(on_stream);
});


io.on('connection', function(socket) {
  console.log('a user connected index outside routerrr');

  // Listen to stop Button being clicked
  socket.on('stopStream', function()  {
    console.log("Stoping Stream...");
    if(on_stream) {
      console.log("SOCKET DEF:", on_stream);
      closeStream();
    }
  });

});

// start stream
function startStream(term) {
  // return new Promise((resolve, reject) => {
    // console.log("TERM _" +term);
    client.stream('statuses/filter', { track: term }, function(stream) {
      _stream = stream;
      on_stream = true;
      console.log("startStream DEF:", on_stream);

      console.log("starting stream...");
      _stream.on('data', function(tweet) {
      console.log(tweet.text + "Streaming");
          // socket.emit('tweet', tweet.text);
      });

      _stream.on('error', function(error) {
        console.log("erorr:: " + error);
          throw error;
      });
    });
}  


function closeStream() {
  console.log('Closing stream...');
  _stream.destroy();
  on_stream = false;
  console.log("close stream: ", on_stream );
}

   return router;
}

script.js

function startSearchForm() {
   $("#startBtn").on('click', function() {

        let form = $("#search-form");
        let query = form.serialize();
        console.log(query);
        $.post('/', query);
   });  
}
function stopSearchForm() {
    $("#stopBtn").on('click', function() {
        let startSearchValue = $("#searchTerm").val("");
        console.log("Stop Stream...");
        socket.emit('stopStream', function(data) {
            console.log("Stream Stop Complete");
        });

        // let form = $("#searchStop-form");
        // let query = form.serialize();
        // console.log(query);
        // $.post('/', query);
   }); 
}

index.pug

  form#search-form(action='javascript:startSearchForm()', method='POST')
    input(type="text" id="searchedTerm" name="searchTerm" placeholder="#hastag" required)
    button(type="submit"  name="startBtn" id="startBtn") Search

  form#searchStop-form(action='javascript:stopSearchForm()', method='POST')
    input(type="text" id="stopSearch" name="stopSearch" value="stopSearch" hidden)
    button(type="submit" id="stopBtn" name="stopBtn") Stop

Answer 1

仅删除行$("#startBtn").on('click', function() {和$("#stopBtn").on('click', function() {（以及每个行的结尾});）怎么样？看起来startSearchForm和stopSearchForm已经在点击时被调用，所以让他们来做吧。

为什么我的表单多次发布并且套接字发出多个事件？

1 个答案: