phpstudy集成环境

 首页 > js或者jquery如何实现类似alert式的函数阻断？

js或者jquery如何实现类似alert式的函数阻断？

写了一个蒙版插件，现在遇到了一个问题，如何实现类似alert弹窗时阻断后面函数的执行。
比如，插件实例化了一个confirm：

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

我该如何在插件中进行阻断，当点击确定按钮后再执行刷新页面的方法。

请勿提出类似给window.location.reload();加倒计时的解决方法，思考如何在插件中进行阻断，谢谢各位大神。

http://luojinghui.github.io/LDialog/html/index.html
这是我的demo地址，还有，如果给类似tips方法后面写刷新页面方法，可能tips还在执行过程中就刷新页面了。

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

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

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 可以阻断。这种情况下，我觉得你应该考虑的是异步（Callback或Promise）方式，而不是阻断方式，比如

你想要的（仅算法）

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

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

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

注意 onOkButton 和 onCancelButton 两个回调就是指你弹框出来的按钮事件。一般情况下应该考虑把弹框封装成函数，所以假设你已经封装成了 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 还在制定中，尚不可用于生产模式。

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

你需要es6的Generator 函数

【热门文章】
【热门文章】