Question

我有一个简单的问题，但似乎无法解决。

此代码可以正常工作，在执行第二个操作之前先警告第一个操作：

// define our function with the callback argument
function some_function(callback) {
  var firstaction = alert('first action');
  // call the callback
  callback(firstaction);
}
// call the function
some_function(function(secondaction) {
  // this anonymous function will run when the
  // callback is called
  alert('second action');
});

.background {
  background-color: #ddd;
}

.border {
  border: 4px solid #ffb300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">Test</div>

这段几乎相同的代码不起作用，没有添加任何类，也没有发出警报：

// define our function with the callback argument
function some_function(callback) {
  var firstaction = $(".background").addClass("border");
  // call the callback
  callback(firstaction);
}
// call the function
some_function(function(secondaction) {
  // callback is called
  alert('second action');
});

.background {
  background-color: #ddd;
}

.border {
  border: 4px solid #ffb300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">Test</div>

我知道代码在其他方面并没有多大意义，但是我试图绕开为什么它不会先添加类然后发出警报的想法。

任何提示都将不胜感激！

Answer 1

您尚未在第二个片段中添加jQuery。我对其进行了修改，并包含了jQuery。现在工作正常。

// define our function with the callback argument
function some_function(callback) {
  var firstaction = $(".background").addClass("border");
  // call the callback
  callback(firstaction);
}
// call the function
some_function(function(secondaction) {
  // callback is called
  alert('second action');
});

.background {
  background-color: #ddd;
}

.border {
  border: 4px solid #ffb300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">Test</div>

Answer 2

我认为定义Jquery与包括Jquery相同。

我现在通过添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我还在代码中做了一些改动，我在var之后以function（）{}开始。现在第二个警报来了，但是没有添加'border'类。

<!DOCTYPE html>
<html>
<head>
<style>

.background {
    background-color: #ddd;
}

.border {
    border: 4px solid #ffb300;
}


</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
// define our function with the callback argument
function some_function(callback) {
  var firstaction = function() {
    $(".background").addClass("border");
  };
  // call the callback
  callback(firstaction);
}
// call the function
some_function(function(secondaction) {
  // this anonymous function will run when the
  // callback is called
  alert('second action');
});
</script>

</head>
<body>

<div class="background">Test</div>

</body>
</html>

Answer 3

您需要在callback（）中调用函数“ firstaction”。尝试使用以下代码段。

// define our function with the callback argument
function some_function(callback) {
  var firstaction = function() {
    $(".background").addClass("border");
  };
  // call the callback
  callback(firstaction());
}
// call the function
some_function(function(secondaction) {
  // this anonymous function will run when the
  // callback is called
  alert('second action');
});

.background {
  background-color: #ddd;
}

.border {
  border: 4px solid #ffb300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">Test</div>

简单回叫功能无法正常工作

3 个答案: