内部函数在 Firefox 中不起作用，但在 chrome 中可以

Posted 2023-05-09

【中文标题】内部函数在 Firefox 中不起作用，但在 chrome 中可以

【英文标题】：Inner function does't work in firefox, but its okay in chrome

【发布时间】：2021-10-27 21:48:52

【问题描述】：

我编写这段代码是为了初始化一个编辑器，但我的代码在 Firefox 浏览器中的行为有所不同。

这是我的代码的一部分：

window.hexbit.widget = 
.
.
.
initEditorOn: function (editorId, mediaButtons = false) 
            // check id is real
            if (!document.getElementById(editorId) ||
                editorId.endsWith('__i__')) 
                return;
            

            // The user has disabled TinyMCE.
            if (typeof window.tinyMCE === 'undefined') 
                wp.editor.initialize(editorId, 
                    quicktags: true
                );
                return;
            

            if (window.tinyMCE.get(editorId) !== null) 
                console.log('window.tinyMCE.get(editorId) !== null', window.tinyMCE.get(editorId))
                // reinitialize editor
                window.tinyMCE.get(editorId).on('remove', function () 
                    console.log('removed');
                    window.setTimeout(function () 
                        window.hexbit.widget.initEditorOn(editorId, mediaButtons);
                    , 50);
                );
                wp.editor.remove(editorId);
                return
            

            //init tinyMCE
            window.wp.editor.initialize(editorId, 
                mediaButtons: mediaButtons,
                tinymce: 
                    forced_root_block: false,
                    remove_linebreaks: false,
                    remove_trailing_brs: false,
                    verify_html: false,
                    mode: 'html',
                    textarea_rows: 4,
                    entity_encoding: "raw",
                    init_instance_callback: function (editor) 
                        editor.getBody().style.backgroundColor = "#F4FFFF";
                        // rebuild editor if iframe destroyed
                        jQuery(editor.getWin()).on('unload', function () 
                            console.log('#########HERE############ ')
                            window.hexbit.widget.initEditorOn(editorId, mediaButtons);
                        );
                    ,
                    setup: function (editor) 
                        // important to save in live edit
                        editor.on('keyup execcommand paste', window.tinyMCE.util.Delay.debounce(function (e) 
                            window.tinyMCE.triggerSave();
                        , 1000));
                        editor.on('keyup execcommand paste', window.tinyMCE.util.Delay.debounce(function (e) 
                            $('body #' + editorId).trigger('change');
                        , 3000));
                    ,
            );
        ,
.
.
.

问题是：虽然这段代码在 Chrome 中运行良好，但在 Firefox 中，当调用此 jQuery(editor.getWin()).on('unload', function () 回调时，我的调试日志 console.log('#########HERE############ ') 按预期打印出来，但未调用此行 window.hexbit.widget.initEditorOn(editorId, mediaButtons);！ 我找不到这个错误的原因，如果有人知道，请解释一下。 谢谢...

【问题讨论】：

如果是is not called 肯定有错误 - 错误是什么

好的。通过从第一个条件下设置断点，我意识到问题出在 DOM 上，而这个问题是由于 Firefox 浏览器中未准备好的 DOM 造成的...，并且 init 操作应该在 "删除回调”。

【参考方案1】：

我通过使用延迟为 0 的 setTimeOut 修复了这个问题，underscore js 也有一个函数 _.defer(function, *arguments) 推迟调用函数直到当前调用堆栈被清除，类似于使用延迟为 0 的 setTimeout。 它对于在不阻塞 UI 线程更新的情况下以块执行昂贵的工作或 HTML 渲染非常有用。