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

Question

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

PROBLEM: When the start/stop button is clicked for FIRST time, the stream starts and stops correctly. The second time, when start button is clicked the router.post() is posting TWICE to server. And when STOP button is clicked the socket event emits twice.

从这一点开始，start/stop 按钮会以指数方式触发多个 post 请求（开始）和套接字事件（停止流）。代码崩溃...

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

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 已经在点击时被调用了，所以让他们来做吧。

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

Why is my form is POSTING multiple times and Socket emitting multiple events?

javascript

websocket

node.js

socket.io

twitter-streaming-api