如何只调用一次ajax

Question

我从这段代码调用函数:

    <div id="header-button-news" class="header-button-info">
        <a href="javascript:;" title="???????" onclick="showNews()"></a>
        <div class="new">2</div>
    </div>

我的功能是

function showNews()
{          
        //other js which show block 

        jQuery("#loader").show();


        //ajax which load content to block
        jQuery.ajax({
            type: "GET",
            url: link,
            dataType: "html",
            success: function(data) {
                jQuery('#top-info-news').html(data);   
            },
            complete: function(){
                jQuery('#loader').hide();
            },
        });
}

我怎样才能进行一次ajax通话？所以当加载内容并且页面没有被刷新而不加载ajax时？我试图做布尔变量,但没有,我支持它是因为我每次调用函数.请告诉我怎么做.

谢谢

Answer 1

当你想在那个事件上做点什么的时候.

确定何时已加载数据.

var loaded = false;

function showNews() {
    //other js which show block 

    jQuery("#loader").show();


    if(loaded) return;

    //ajax which load content to block
    jQuery.ajax({
        type: "GET",
        url: link,
        dataType: "html",
        success: function(data) {
            jQuery('#top-info-news').html(data);   
        },
        complete: function(){
            jQuery('#loader').hide();
        },
    });

    loaded = true;
}

或者one.在想要调用一次时使用.

<a href="javascript:;" title="???????" onclick="showNews()" class="showNews"></a>

jQuery('.showNews').one('click', function() {
    // your code
});

"Attach a handler to an event for the elements. The handler is executed at most once per element."

参考

Answer 2

使用.one()功能:

将处理程序附加到元素的事件.每个元素最多执行一次处理程序.

<a href="#" title="???????" id="shownews"></a>

我已经id为锚添加了一个属性以允许更容易绑定,但您可以使用$("#header-button-news a").one

$(document).ready(function () {
  $('#shownews').one('click', function (evt) {

    evt.preventDefault(); // prevent default click action

    jQuery("#loader").show();
    //ajax which load content to block
    jQuery.ajax({
      type: "GET",
      url: link,
      dataType: "html",
      success: function (data) {
        jQuery('#top-info-news').html(data);
      },
      complete: function () {
        jQuery('#loader').hide();
      },
    });
  });
});

还用于event.preventDefault()防止跟踪锚点上的默认操作