javascript - “return false”并没有结束我的功能

Question

当控制台记录no时，我的verifyImageURL()中的第二个括号肯定会触发。

但是，return false 并不会结束该函数。之后一切都会继续(最后触发 AJAX 调用)。

这是我的 JS:

function verifyImageURL(url, callBack) {
  var img = new Image();
  img.src = url;
  img.onload = function () {
        callBack(true);
  };
  img.onerror = function () {
        callBack(false);
  };
}

$('input#id_imageURL').on('change', function(e) {
    var url = $(this).val();
    console.log(url, url['type']);
    verifyImageURL(url, function (imageExists) {
        if (imageExists === true) {
            console.log('yes');
        } else {
            console.log('no');
            $('.add_file_div h3').html('That URL is not an image');
            return false;
        }
    });

    var formData = new FormData();
    var random_filename = random_string();

    if ( validateYouTubeUrl($(this).val()) ) {
        console.log($(this).val());
        var videoid = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
        $('.add_file_label').append('<iframe src="https://www.youtube.com/embed/' + videoid[1] + '"' + '</iframe>');
        $('.add_file_div h3').hide();
        $('.add_file_label').css({
            'border-radius': '5px',
            'box-shadow': '5px',

        });
        $('input#id_imageURL').hide();
        $('#delete_preview_image').show();
    }
    else {

        $('.add_file_div h3').hide();
        $('.add_file_label').css({
            'border-radius': '5px',
            'box-shadow': '5px',
        });
        var imagePath = e.currentTarget.value;
        $('.add_file_label').css('background', 'url(' + imagePath + ') scroll no-repeat center/cover');
        $('.add_file_label').css('opacity', '0.4');
        $('.loading_spinner').css('visibility', 'visible');
        $('.add_file_label').append('<input class="temp_s3_url" type="hidden" name="temp_s3_url">');
        $('.temp_s3_url').val(random_filename);
        $('input#id_imageURL').hide();
        $('#delete_preview_image').show();


        formData.append('csrfmiddlewaretoken', $("input[name='csrfmiddlewaretoken']").val());
        formData.append('random_filename', random_filename);
        formData.append('imageURL', imagePath);

        console.log('Entered:', imagePath);
        $.ajax({
            url: '/upload_image/',
            data: formData,
            type: 'POST',
            contentType: false,
            processData: false,
            success: function () {
                $('.add_file_label').css('opacity', '1');
                $('.add_file_label').css('background', 'url(' + imagePath + ') scroll no-repeat center/cover');
                $('.loading_spinner').css('visibility', 'hidden');
            }
        });

    }
});

知道问题是什么吗？

Answer 1

也许下面的代码可以工作，它使用 verifyImageUrl 作为 promise :

function verifyImageURL(url) {
  var img = new Image();
  img.src = url;
  return new Promise(
    function(resolve){
      img.onload = function () {
        resolve(true);
      };
      img.onerror = function () {
        resolve(false);
      };    
    }
  )
}

$('input#id_imageURL').on('change', function (e) {
  var $this = $(this);
  var url = $this.val();
  console.log(url, url['type']);
  verifyImageURL(url)
  .then(function (imageExists) {
    if (imageExists === true) {
      console.log('yes');
    } else {
      console.log('no');
      $('.add_file_div h3').html('That URL is not an image');
      return false;
    }

    var formData = new FormData();
    var random_filename = random_string();

    if (validateYouTubeUrl($this.val())) {
      console.log($this.val());
      var videoid = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
      $('.add_file_label').append('<iframe src="https://www.youtube.com/embed/' + videoid[1] + '"' + '</iframe>');
      $('.add_file_div h3').hide();
      $('.add_file_label').css({
        'border-radius': '5px',
        'box-shadow': '5px',

      });
      $('input#id_imageURL').hide();
      $('#delete_preview_image').show();
    }
    else {

      $('.add_file_div h3').hide();
      $('.add_file_label').css({
        'border-radius': '5px',
        'box-shadow': '5px',
      });
      var imagePath = e.currentTarget.value;
      $('.add_file_label').css('background', 'url(' + imagePath + ') scroll no-repeat center/cover');
      $('.add_file_label').css('opacity', '0.4');
      $('.loading_spinner').css('visibility', 'visible');
      $('.add_file_label').append('<input class="temp_s3_url" type="hidden" name="temp_s3_url">');
      $('.temp_s3_url').val(random_filename);
      $('input#id_imageURL').hide();
      $('#delete_preview_image').show();


      formData.append('csrfmiddlewaretoken', $("input[name='csrfmiddlewaretoken']").val());
      formData.append('random_filename', random_filename);
      formData.append('imageURL', imagePath);

      console.log('Entered:', imagePath);
      return $.ajax({
        url: '/upload_image/',
        data: formData,
        type: 'POST',
        contentType: false,
        processData: false,
      }).then(
        function () {
          $('.add_file_label').css('opacity', '1');
          $('.add_file_label').css('background', 'url(' + imagePath + ') scroll no-repeat center/cover');
          $('.loading_spinner').css('visibility', 'hidden');
        }
      );
    }
  }).catch(
    function(error){
      console.error("There was an error:",error);
    }
  );
});

您的函数似乎有点长，也许您应该将其拆分为较小的函数，例如 hideFileInput。