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

reference

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()来阻止对锚点的默认操作进行跟踪

Answer 3

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

在JS中：

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

如何只调用一次ajax

3 个答案: