js方法中回调函数的使用

js方法中回调函数的使用

什么是回调函数(Callback)

在JavaScript中,函数是对象。 因此,函数可以将函数作为参数,并且可以由其他函数返回。 执行此操作的函数称为高阶函数。 作为参数传递的任何函数都称为回调函数。

回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。

为什么我们需要回调?

出于一个非常重要的原因-JavaScript是一种事件驱动语言。这意味着JavaScript不会继续等待响应,而是会在侦听其他事件时继续执行。

让我们看一个基本的例子:

function first(){
console.log(1);
}
function second(){
console.log(2);
}
first();
second();
如你所料,首先执行函数,然后执行第二函数,将以下内容记录到控制台:

// 1
// 2
到目前为止一切都很好。

但是,如果函数包含无法立即执行的某些代码怎么办? 例如,我们必须先发送请求然后等待响应的API请求? 为了模拟此动作,将使用setTimeout,它是一个JavaScript函数,将在设置的时间后调用该函数。 我们将功能延迟500毫秒以模拟API请求。 我们的新代码将如下所示:

function first(){
// Simulate a code delay
setTimeout( function(){
console.log(1);
}, 500 );
}
function second(){
console.log(2);
}
first();
second();
现在了解setTimeout()的工作方式并不重要。重要的是,你看到我们把console.log(1)移到500毫秒延迟内。那么,当我们调用函数时会发生什么呢?

first();
second();
// 2
// 1
即使我们先调用了first()函数,我们在second()函数之后才打印了它的结果。

这并不是说JavaScript没有按照我们想要的顺序执行我们的函数,而是JavaScript在继续执行second()之前没有等待first()的响应。

因为你不能在一个函数后调用另一个另一个函数,而又希望它们以正确的顺序执行。

回调是一种确保某些代码在其他代码已经完成执行之前不会执行的方法

 

1、调用先执行的方法(usload),在此方法中写上回调方法名(usloaddata)

<script>
    $(function () {
        //执行usload方法,执行完成后执行usloaddata方法
        usload(usloaddata);  
    });
</script>

2、编写usload方法

 

复制代码
function usload(cb) {
    var wguid = usbasic.q("wguid");
    var url = "/extacs/acs_dash/acsonedashdata?wguid=" + wguid;
    //ushttp.UsAjaxJSON(url, null, true, function (data) {
    ushttp.us_ajax_post_jsonv2(url, null, true, true, function (data) {
        if (data.result == 0) {
            _wdata = data.data;
            cb();
        }
        else {
            usbasic.errorMsg(data.msg);
        }
    });
}
复制代码

 

3、编写usloaddata方法

复制代码
function usloaddata() {
    //如果没有选择投影机灯时,则不显示投影机灯时;
    if (_wdata.dataonepage.typeid.indexOf("51") < 0) {
        $("#section4").remove();
        _anchors = ['p1', 'p2', 'p3', 'p5'];
    }

    //USCharts.usacs_listroom();
    //USCharts.usacs_listdetail();
    //USCharts.usacs_listtype();
    //USCharts.usacs_typesum();
    //USCharts.usacs_projectorsum();
    //USCharts.usacs_room();
    //USCharts.usacs_dataonepage();
    //initialization(".autoheighttable");
    //usboxautoheight();
    //fullpage_api.destroy('all');
    //initialization(".autoheighttable2");
};
usloaddata
复制代码

posted @   じ逐梦  阅读(855)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示