节点.on方法触发太多次 [英] Node .on method firing too many times

问题描述

我有一个Electron应用程序，向用户显示目录列表.当用户单击按钮时，我的界面脚本interface.js将清除容器div并将消息发送到main.js.收到消息后，main.js会将目录扫描到文件名数组中，并将该数组返回给interface.js作为响应.Interface.js使用.on方法，该方法会在收到响应时触发，并使用数组的内容更新容器div.

I have an Electron app that presents a directory listing to the user. When the user clicks a button my interface script, interface.js, clears the container div and sends a message to main.js. On receiving the message, main.js scans the directory into an array of filenames and returns the array to interface.js as a response. Interface.js uses a .on method that fires when the response is received and updates the container div with the contents of the array.

这是我第一次真正尝试使用Node，就界面行为而言，一切工作都非常出色！太好了，只有几个小时，我已经爱上了Node！

This is my first real attempt at using Node, and as far as interface behaviour went everything worked brilliantly! Wonderful, it's only been a few hours and I'm already loving Node!

但是，在调试/压力测试时，我在.on方法中将返回的数组打印到控制台，并注意到一些奇怪的行为.用户第一次单击该按钮时，.on方法将运行一次(通过向控制台发送的一条消息进行验证).用户第二次单击时，该方法运行两次(通过向控制台发送的两则消息验证)；第三次运行三遍，依此类推.

However, while debugging/stress testing I printed the returned array within the .on method to the console and noticed some strange behaviour. The first time the user clicks the button, the .on method runs once (verified by one message to the console). The second time the user clicks, the method runs twice (verified by two messages to the console); the third time it runs three times and so on.

main.js中用于扫描目录的函数每次单击仅运行一次，因此问题必须在inteface.js中.

The function in main.js that scans the directory only runs once per click, so the issue must be within inteface.js.

我的main.js和interface.js代码:

My code for main.js and interface.js:

main.js:

const {app, BrowserWindow, ipcMain} = require('electron');
const fs = require('fs');

...

ipcMain.on( 'list-directory', ( event, directory ) => {
    var files = fs.readdirSync( directory );
    event.sender.send( 'list-directory-reply', files );
});

interface.js

interface.js

var { ipcRenderer, remote } = require( 'electron' );  
var main = remote.require( "./main.js" );

...

button.addEventListener('click', function(){ showDialogue( this ); }, false );

...

showDialogue( select ) {
    // clear the dialogue
    // some other stuff
    ipcRenderer.send( 'list-directory', './files/documents/' );
    ipcRenderer.on( 'list-directory-reply', function( event, contents ) {
        console.log( contents );
        if ( contents.length > 0 ) {
            // add contents to the dialogue
        }
    } );
}

该代码改编自Electron网站上的教程.

The code is adapted from a tutorial on the Electron website.

为什么 ipcRenderer.on 可以多次运行?每次单击按钮时，它是否都可能绑定到某物，因此其运行次数与过去的点击次数相同?我在事件侦听器函数中以及在 ipcRenderer 内容之前的 showDialogue 函数中放置了一条print语句，但是它们每次都只打印一次，因此重复肯定只会出现来自 ipcRenderer.on .

Why does ipcRenderer.on run multiple times? Is it possible that it's bound to something every time the button is clicked, and thus runs as many times as past clicks? I put a print statement inside the event listener function, and inside the showDialogue function before the ipcRenderer stuff, but they both only printed once per click so the repeats are definitely only coming from ipcRenderer.on.

推荐答案

每次单击都会导致多个订阅，您正在订阅 ipcRenderer.on .尝试在click事件之外定义 ipcRenderer.on 事件处理程序，它应该可以正常工作.

You are subscribing to ipcRenderer.on after every button click which is causing multiple subscriptions. Try to define the ipcRenderer.on event handler outside click event and it should work fine.

类似的东西-

button.addEventListener('click', function(){ showDialogue( this ); }, false );


ipcRenderer.on( 'list-directory-reply', function( event, contents ) {
    // ipcRenderer event handler
});

showDialogue(select) {
    ipcRenderer.send( 'list-directory', './files/documents/' );
}

这篇关于节点.on方法触发太多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！