javascript - js或者jquery如何实现类似alert式的函数阻断?
PHPz
PHPz 2017-04-11 10:49:06
[JavaScript讨论组]
PHPz
PHPz

学习是最好的投资!

全部回复(6)
巴扎黑

据我所知,目前还只有 alert 可以阻断。这种情况下,我觉得你应该考虑的是异步(Callback或Promise)方式,而不是阻断方式,比如

你想要的(仅算法)

doSomethingBefore();
if (confirm()) {
    doSomething();
}
doSomethingAfter();

如果使用回调的方式可以这样设计

doSomethingBefore();
showComfirm({
    onOkButton: function() {
        doSomething();
        doSomethingAfter();
    },
    onCancelButton: function() {
        doSomethingAfter
    }
});

注意 onOkButtononCancelButton 两个回调就是指你弹框出来的按钮事件。一般情况下应该考虑把弹框封装成函数,所以假设你已经封装成了 showConfirm()

如果采用 jQuery 的 Deferred 来实现大概可以这样设计

doSomethingBefore();
var d = $.Deferred();
showComfirm({
    onOkButton: function() {
        var data = void 0;   // 如果有数据的话,这里就是获得数据的过程
        d.resolve(data);    // 没有数据可以不要这个参数
    },
    onCancelButton: function() {
        d.reject();
    }
});

d.done(function() {
    doSomething();
}).always(function() {
    doSomethingAfter();
});

如果使用 ES2015(ES6) 的 Promise 可以这样设计

doSomethingBefore();
var p = new Promise(function(resolve, reject) {
    showComfirm({
        onOkButton: () => {
            var data = void 0;   // 如果有数据的话,这里就是获得数据的过程
            resolve(data);    // 没有数据可以不要这个参数
        },
        onCancelButton: () => {
            reject();
        }
    });
});

p.then(() => {
    doSomething();
    doSomethingAfter();
}, () => {
    doSomethingAfter();
});

实现的方式大同小异,如果使用 async/await 的方式,可以像写同步代码一样写异步代码,这在 C# 里已经实现,但是在 javascript 中要在 ES7 才能实现,ES7 还在制定中,尚不可用于生产模式。

巴扎黑

你需要es6的Generator 函数

黄舟

1. window.location.reload();,放在确认按钮的回调事件中调用

    LDialog.confirm("", {}, function() {
        //dosomething...
        window.location.reload();//执行刷新页面方法函数
    });//实例化插件,生成了一个类似confirm的确认框,回调函数是确认按钮事件
    

2.确认按钮回调事件中发送事件,外部监听这个事件,在接收到事件后,执行页面刷星

    LDialog.confirm("", {}, function() {
        //dosomething...
         var ev = new Event("confirmDone");
         document.dispatchEvent(ev);
    });//实例化插件,生成了一个类似confirm的确认框,回调函数是确认按钮事件
    
    document.addEventListener("confirmDone",function(event){
        window.location.reload();//执行刷新页面方法函数
    },false);
黄舟

同问,不过Alert会堵塞ui渲染,这个对用户不太友好,可以通过事件来一步步执行不是更好吗,加个全屏遮罩就有alert那种效果了

阿神

你这种需求,看来只有yield或者async/await才能满足了。

或者使用重新生成代码的技术(这需要你自己去对JS语言进行语法扩展,就像在babel里面模拟yield),这就复杂了,例如当年的wind.js。

怪我咯

谢谢各位亲,我想通了,没有必要去做阻断,费事费力,其实最好的阻断在回调里面就行了,我刚才确实想的太多了。。。。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号