时间戳

首页 > 解决方案 > 了解此逻辑中对匿名函数的需求

jquery - 了解此逻辑中对匿名函数的需求

问题描述

我正在研究 Web 开发，现在正在做 jquery 部分。我有一个逻辑问题，这样我可以理解语法背后的逻辑，这样我才能更好地理解它。

鉴于此逻辑：

$(document).ready(function() {
  $("p").on({
    mouseenter: function() {
      $(this).css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "pink");
    },
    click: function() {
      $(this).css("background-color", "red");
    }
  })
})

  1. 为什么函数会在()之后进入内部，.ready而不是像这样的任何其他方法或函数：.ready(){ function should be here? }？我的意思是通常在()你内部给出一组参数而不是代码本身，不是吗？

  2. 为什么我必须声明一个匿名函数并且不能简单地将代码放在后面mouseenter？在事件发生之前它无论如何都不会被执行，那么为什么我必须声明匿名函数并有额外的一组花括号呢？我的意思是为什么我必须这样做：

mouseenter: function() {
  $(this).css("background-color", "yellow");
}

而不是这个：

mouseenter: $(this).css("background-color", "yellow");

谢谢你。

标签： jquery

解决方案

1）为什么函数在()之后进入内部.ready而不是像这样的任何其他方法或函数：.ready(){ function should be here? }？我的意思是通常在()你内部给出一组参数而不是代码本身，不是吗？

这是因为您将匿名函数作为参数提供给ready事件处理程序。然后在触发事件时调用此函数。这是回调模式，在整个 jQuery 中很普遍。

2）为什么我必须声明一个匿名函数并且不能简单地将代码放在后面mouseenter？在事件发生之前它无论如何都不会被执行，那么为什么我必须声明匿名函数并有额外的一组花括号呢？

如果您不将逻辑放在函数中，它将立即被调用，因此您的断言是不正确的。如果您以这种方式执行此操作，您会将css()调用的结果分配给mouseenter处理程序（它是$(this)jQuery 对象，它也将在不同的范围内执行，因此this不会是对引发事件的元素的引用，而是持有mouseenter密钥的对象），而不是要运行的函数。这就是您需要将逻辑包装在匿名函数中的确切原因；这样逻辑就可以在需要时执行，而不是立即执行。

这两个问题似乎都是由于对匿名函数的使用有些混淆。在需要时调用它们之前，它们可以被声明为变量并传递，例如：

var foo = function() {
  console.log('hello');
}

function doSomethingAfter3Seconds(action) {
  setTimeout(action, 3000);
}

doSomethingAfter3Seconds(foo);

推荐阅读