Question

第一次单击按钮时，我希望让事件处理程序执行JSON请求并返回一个处理按钮上任何进一步点击的函数。如何在没有绑定和解除按钮上的事件处理程序的情况下实现此目的？

我想只是执行请求然后让返回的事件处理程序显示或隐藏DOM元素，而不再通过整个函数（缓存检查等）

伪码

var setuphandler = (function(){
    // get json, setup dom etc.
    // ...

    // return the actual
    // show/hide function here
    return function(){
       $(img).toggle();
    }
});

$('button').on('click', handler());

A sample JSFiddle here

Answer 1

您是否正在寻找this(link to fiddle)?

之类的内容

$(function(){
  var aboutpage = (function() {

    var $img;
    return function(data){
      if($img != undefined) {
        $img.toggle()
      } else {
        $.ajax({
          url:"http://fuckyeahbrutalism.tumblr.com/api/read/json",
          dataType: "jsonp", cache: false
        }).done(function(data) {
          var resp = data.posts[0]['photo-url-75'];
          $img = $('<img/>', {
              src: resp
          });
          $('#container').append($img);
        });
      }
    }
  })();
  $('#showcontent').on('click', aboutpage);
});

Answer 2

我不知道为什么你需要在这里创建自己的延迟对象。您似乎可以在aboutpage处理程序的末尾分配.done()，或者只使用标记来跟踪这是否是第一次：

var aboutpage = function() {
      $.ajax({
            url:"your url here",
            dataType: "jsonp",
            cache: false
      }).done(function(data){
            var resp = data.posts[0]['photo-url-75'];
            var aboutEl = $('<img/>', {src: resp});
            $('#container').append(aboutEl);

            // assign aboutpage so the next click will just toggle
            aboutpage = function() {
                $('img').toggle();
            };            
      });
 };

$('#showcontent').on('click', function(){
     aboutpage();
};

你也可以使用一个标志：

function aboutpage() {
    if (!aboutpage.gotJSON) {
         // the first time this is called, retrieve JSON data
         aboutpage.gotJSON = true;
         $.ajax({
            url:"your url here",
            dataType: "jsonp",
            cache: false
         }).done(function(data){
            var resp = data.posts[0]['photo-url-75'];
            var aboutEl = $('<img/>', {src: resp});
            $('#container').append(aboutEl);
         });
    } else {
        // subsequent times, just toggle
        $('img').toggle();
    }
}

jQuery事件处理程序关闭

2 个答案: