在文档首次加载时调用两个不同函数的正确方法-js教程-PHP中文网

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

DDD

发布： 2025-08-27 18:54:01

原创

459人浏览过

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

在文档首次加载时，如何正确调用两个不同的 JavaScript 函数的问题。通过 jQuery 的 $(document).ready() 方法，我们可以确保在 DOM 完全加载后执行函数。本文将提供两种解决方案，包括直接调用函数和使用 CSS 类来控制元素的显示和隐藏，并详细说明每种方法的优缺点和适用场景。

在 Web 开发中，经常需要在页面加载完成后执行一些初始化操作，例如绑定事件监听器、调整页面元素样式等。如果这些操作依赖于 DOM 元素的完整加载，则需要确保在 DOM 加载完成后再执行这些操作。jQuery 提供了 $(document).ready() 方法，可以确保在 DOM 完全加载后执行指定的函数。

以下介绍两种解决在文档首次加载时调用两个不同函数的方法：

方法一：直接调用函数

最简单的方法是在 $(document).ready() 函数中直接调用需要执行的函数。例如：

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));
   });

     slug_and_hide(jQuery('.cx-ui-container input[type="text"]'));
      handle_select_change(jQuery('.cx-ui-container select'));
});

登录后复制

这段代码首先绑定了 keyup 和 change 事件监听器到相应的元素上。然后，在 $(document).ready() 函数的最后，直接调用了 slug_and_hide 和 handle_select_change 函数，并传入相应的选择器作为参数。这样可以确保在页面加载完成后，这两个函数会被立即执行。

优点：

代码简单易懂。
易于实现。

缺点：

在某些情况下，可能会出现短暂的闪烁，因为元素在 JavaScript 执行之前可能会以默认状态显示。
依赖于元素的选择器。如果选择器不正确，函数可能不会被正确执行。

方法二：使用 CSS 类来控制元素的显示和隐藏

Calliper 文档对比神器

文档内容对比神器

查看详情

另一种方法是使用 CSS 类来控制元素的显示和隐藏，而不是直接使用 JavaScript 来修改元素的 display 属性。这种方法可以避免出现闪烁，并提高用户体验。

首先，定义一个 CSS 类来隐藏元素：

.hide {
  display: none;
}

登录后复制

然后，在 JavaScript 代码中使用 classList.toggle() 方法来切换元素的 hide 类：

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.addClass("hide");
}

登录后复制

优点：