jQuery 如何只调用一次ajax

How to call ajax only once

提问by Viktors

I call function from this code :

我从这段代码调用函数：

    <div id="header-button-news" class="header-button-info">
        <a href="javascript:;" title="Новости" onclick="showNews()"></a>
        <div class="new">2</div>
    </div>

My function is

我的功能是

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();
            },
        });
}

How can I make only once ajax call? so when content is loaded and page was not refresed not to load ajax? I tried to do boolean variables but nothing, I suppouse it is because I call everytime function. Please give me an idea how to do.

如何只进行一次ajax调用？所以当内容被加载并且页面没有被刷新时不加载ajax？我试图做布尔变量，但什么也没做，我认为这是因为我调用了 everytime 函数。请告诉我该怎么做。

thank you

谢谢你

回答by Ricardo Alvaro Lohmann

When you want to do something on that event.

当你想在那个事件上做点什么时。

Identify when you have already loaded your data.

确定何时已经加载了数据。

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;
}

Or use one.when you want to call it once.

或者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."

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

reference

参考

回答by Manse

Use the .one()function :

使用.one()功能：

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

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

<a href="#" title="Новости" id="shownews"></a>

I have added an idattribute to the anchor to allow an easier bind, but you could use $("#header-button-news a").one

我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();
      },
    });
  });
});

Also used event.preventDefault()to prevent the default action on the anchor from being followed

也用于event.preventDefault()防止锚点上的默认操作被遵循

回答by Kir

<div id="header-button-news" class="header-button-info">
    <a id="a_news" title="Новости"></a>
    <div class="new">2</div>
</div>

In JS:

在JS中：

$(function(){
    $('a#a_news').one('click',showNews);
})