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

Question

• 我有一个表单，在 start 时通过 router.post() 启动流按钮被点击。当单击开始按钮时。

• 当单击停止按钮时，我会发出一个套接字事件来停止从服务器流式传输。

• 我使用 on_stream bool 值来设置启动/停止流的 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.

从此时开始，开始/停止按钮会触发呈指数级增长的多个发布请求(开始)和套接字事件(停止流)。使代码崩溃...

第二次启动和停止后的控制台(多个 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...

浏览器控制台(事件触发多次):/image/ACEvJ.jpg

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;
}

脚本.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);
   }); 
}

索引.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已经点击了，让他们来做工作。