Làm thế nào để ngăn chặn lặp lại trong chức năng jQuery?

Question

Tôi có một chức năng đơn giản như jQuery

$('.button').click(function(){ 
    $("#target").slideToggle().load('http://page'); 
}); 

By slideToggle hành vi, mỗi nhấp chuột gây ra một slide, nhưng vấn đề là nó sẽ được tải url một lần nữa quá.

Làm cách nào để giới hạn chức năng load() chỉ được thực hiện một lần, nhưng slideToggle() trên mỗi nhấp chuột. Nói cách khác, làm thế nào để ngăn chặn load() (chỉ tải, không phải toàn bộ chức năng) trong các lần nhấp tiếp theo?

Answer 1

$('.button') 
    .on('click.loadPage', function() { 
     $("#target").load('http://page'); 
     $(this).off("click.loadPage"); 
    }) 
    .on('click.slideToggle', function(){ 
     $("#target").slideToggle(); 
    }); 

và một cách khác mà không vars toàn cầu:

$('.button') 
    .on('click', function() { 
     if (!$(this).data("loaded")) { 
      $("#target").load('http://page'); 
      $(this).data("loaded", true); 
     } 
     $("#target").slideToggle(); 
    }); 

Answer 2

Có biến (toàn cục) cho biết liệu biến đó đã được tải hay chưa. Ví dụ:

var loaded = false; 
$('.button').click(function(){ 
    if(!loaded){ 
     $('#target').load('http://page'); 
     loaded = true; 
    } 
    $("#target").slideToggle(); 
}); 

Điều này sẽ làm cho slideToggle xảy ra trên mỗi nhấp chuột, nhưng trang chỉ tải một lần. :)