Question

我有一个装载机，

<div id="loading">Loading..!</div>
<script>$('#loading').hide();</script>

我想在启动js函数时自动显示该加载器，并在js函数完成时隐藏。

并在js文件中

function myfunc{
$('#loading').show();

//some bla bla;

$('#loading').hide();
}

function myfunc1{
$('#loading').show();

//some bla bla;

$('#loading').hide();
}

... .. ....

function myfuncN{
$('#loading').show();

//some bla bla;

$('#loading').hide();
}

我想自动显示加载程序，而不是将该语句写入每个函数。

Answer 1

正如评论中已经提到的那样，您现在正在按照更清晰的方式进行操作，但是如果您仍想对现有功能应用其他行，则可以像在{{1}中所做的那样使用.apply() }下面的功能：

applier

Answer 2

如果使用的是ajax jQuery函数，则可以声明全局Ajax配置像这样

$.ajaxSetup({
    beforeSend: function() {
        $('#loading').show();
    },
    complete: function() {
        $('#loading').hide();
    }
});

这样，您可以在每次异步调用开始时显示加载指示器，并在结束时将其隐藏

我希望这对您有帮助

Answer 3

您可以编写一个装饰其他功能的功能。

在ES6中

function showAndHide(func) {
  return (...args) => {
    $('#loading').show();

    func(...args);

    $('#loading').hide();
  };
}

const myFunc = showAndHide(() => {
   //blah blah
});

还是ES5

function showAndHide(func) {
  return function decoratedShowAndHide() {
    $('#loading').show();

    func.apply(this, arguments);

    $('#loading').hide();
  };
}

var myFunc = showAndHide(function () {
   //blah blah
});

showAndHide函数接受一个函数作为参数并返回一个函数。因此，它可以修饰功能的执行并提供重用。

在JavaScript中另一个函数开始或结束时执行一条语句

3 个答案: