jQuery 回撥函式和方法連結使用

語言: CN / TW / HK

在前面的章節中,我們也學習了一些 jQuery 的方法,大家有沒有發現,這些方法大多都有一個共同點,就是有一個可選的 callback 引數,這個 callback 其實就是一個回撥函式,回撥函式作為引數傳到另一個函式裡面,一旦事件發生或者某一個任務完成時被執行,經常在非同步程式碼中使用。

回撥函式的使用

我們通過一個函式來舉例,看一下當任務執行完成時,是如何執行回撥函式的。

示例:

例如在執行 animate 函式時新增一個回撥函式作為引數,在動畫執行完畢後呼叫回撥函式,彈出彈出層:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $(".rect").animate({width: '300px'}, 1500,function(){ alert("回撥函式") });
      
    });
  });
</script>
</head>
<body>
  <div class="box">
    <div class="rect" style="background: red;width: 100px;height: 100px;"></div>
  </div>
  <p><button>點選執行動畫</button></p>
</body>
</html>

在瀏覽器中演示效果:

再看一下如果不帶 callback 回撥函式,會有什麼樣的執行效果呢,如下為去掉回撥函式的程式碼:

$(function(){
    $("button").click(function(){
      $(".rect").animate({width: '300px'}, 1500);
      alert("回撥函式");
    });
});

在瀏覽器中的演示效果:

方法連結使用

jQuery 中允許我們將方法連結使用,也就是說可以在一條語句中使用多個 jQuery 方法,通過點號 . 連結。

示例:

我們來看一個例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $(".rect").css("background", "tomato").slideUp(1500).slideDown(1500);
    });
  });
</script>
</head>
<body>
  <p><button>點選按鈕</button></p>
  <div class="rect" style="background: red;width: 100px;height: 100px;"></div>
</body>
</html>

演示效果:

上述示例中,我們將 css()slideUp()slideDown() 等方法連結在一起使用,所以 .rect 元素首先會程式設計橙色,然後向上滑動隱藏元素,最後向下滑動展開元素。

要注意的是,當我們使用連結時,程式碼行會變得很差,但是 jQuery 在語法上不是很嚴格,所以如果想要使用也是可以的。

連結:https://www.9xkd.com/