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

在页面开发中，经常需要在文档加载完成后执行一些初始化操作，例如根据下拉框的初始值显示或隐藏某些元素。然而，如果直接在 $(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 代码：

   

   Magician

   Figma插件，AI生成图标、图片和UX文案

   下载

   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 类。例如：

优点：

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

缺点：

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

总结

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

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

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