問題描述

我有一個 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中掃描目錄的函數每次點擊只運行一次，所以問題一定在interface.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 會運行多次?是否有可能每次單擊按鈕時都綁定到某些東西，因此運行次數與過去的單擊次數一樣多?我在事件偵聽器函數內和 showDialogue 函數內放置了一個打印語句，在 ipcRenderer 東西之前，但它們每次點擊都只打印一次，所以重復肯定只會出現來自 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/' );
}

這篇關于Node .on 方法觸發太多次的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！