在文档首次加载时调用多个函数的正确方法

在页面开发中，经常需要在文档加载完成后执行一些初始化操作，例如根据下拉框的初始值显示或隐藏某些元素。然而，如果直接在 $(document).ready() 中绑定事件监听，可能会导致首次加载时，这些初始化操作没有被触发。本文将介绍两种方法来解决这个问题，确保在页面加载完成后，指定的函数能够立即执行。

方法一：手动触发函数

最直接的方法是在 $(document).ready() 中，除了绑定事件监听器之外，还手动调用一次需要初始化的函数。

jquery( document ).ready( function( $ ) {    // 绑定输入框的 keyup 事件   jQuery('.cx-ui-container input[type="text"]').on('keyup', function(e){     slug_and_hide(jQuery(this));   });    // 绑定下拉框的 change 事件   jQuery('.cx-ui-container select').on('change', function(e){     handle_select_change(jQuery(this));   });    // 首次加载时手动调用函数   slug_and_hide(jQuery('.cx-ui-container input[type="text"]'));   handle_select_change(jQuery('.cx-ui-container select')); });  function handle_select_change(obj) {   var selectField = jQuery(obj);   var selectedValue = selectField.val();   var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea');    if (selectedValue !== "multiple-choice") {     textareaField.css("display", "none");   } else {     textareaField.val("");      textareaField.css("display", "block");   }    }  function slug_and_hide(obj){   var inputField = jQuery(obj).val();   let slug = inputField.toLowerCase().replace(/s+/g, '-');   slug = slug.replace(/[^a-z0-9-]/g, '');   slug = slug.replace(/^-+|-+$/g, '');    let inputSlug = jQuery(obj).parents('.cheryr-ui-repeater-content-box').find('.input-slug-wrap').find('input');   inputSlug.prop('readonly', true);   inputSlug.val(slug);   inputSlug.css("display", "block"); }

优点：

• 简单易懂，易于实现。

缺点：

• 在某些情况下，可能会出现页面元素闪烁的问题，因为元素会先以默认状态显示，然后才被 JavaScript 代码修改。这取决于页面加载速度和 JavaScript 执行速度。

方法二：使用 CSS 类控制显示/隐藏

另一种更优雅的方法是使用 CSS 类来控制元素的显示和隐藏，而不是直接使用 JavaScript 修改 display 属性。

1. 定义 CSS 类：

   .hide {   display: none; }

2. 修改 JavaScript 代码：

   jQuery( document ).ready( function( $ ) {    jQuery('.cx-ui-container input[type="text"]').on('keyup', function(e){     slug_and_hide(jQuery(this));   });    jQuery('.cx-ui-container select').on('change', function(e){     handle_select_change(jQuery(this));   });    // 首次加载时触发 change 事件，初始化元素状态   jQuery('.cx-ui-container select').trigger('change'); });  function handle_select_change(obj) {   var selectField = jQuery(obj);   var selectedValue = selectField.val();   var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea');    if (selectedValue !== "multiple-choice") {     textareaField.addClass("hide");   } else {     textareaField.removeClass("hide");     textareaField.val("");   }    }  function slug_and_hide(obj){   var inputField = jQuery(obj).val();   let slug = inputField.toLowerCase().replace(/s+/g, '-');   slug = slug.replace(/[^a-z0-9-]/g, '');   slug = slug.replace(/^-+|-+$/g, '');    let inputSlug = jQuery(obj).parents('.cheryr-ui-repeater-content-box').find('.input-slug-wrap').find('input');   inputSlug.prop('readonly', true);   inputSlug.val(slug);   inputSlug.removeClass("hide"); }

3. 在 html 中添加初始类：

   在 HTML 中，为需要默认隐藏的元素添加 hide 类。例如：

   <textarea class="hide"></textarea>

优点：

• 避免页面元素闪烁的问题，因为元素在加载时就已经是隐藏状态。
• 代码更简洁，可读性更高。
• 更容易维护，因为 CSS 类可以被复用。

缺点：

• 需要修改 HTML 结构，添加初始类。

总结

本文介绍了两种在文档首次加载时调用多个函数的方法，并分析了各自的优缺点。

• 手动触发函数 简单易懂，但可能存在闪烁问题。
• 使用 CSS 类控制显示/隐藏 更加优雅，可以避免闪烁问题，但需要修改 HTML 结构。

选择哪种方法取决于具体的应用场景。如果对页面加载速度要求不高，且可以接受元素闪烁，那么手动触发函数是一个简单有效的选择。如果对用户体验要求较高，希望避免元素闪烁，那么使用 CSS 类控制显示/隐藏是更好的选择。建议优先考虑使用 CSS 类的方法，因为它更符合现代 Web 开发的最佳实践。