在通过导入/导出完成代码之前，如何防止发生事件？

Question

===================进度更新====================

我已经根据Mozilla和其他教程制作了第一个Async函数。但是，它无法阻止事件，正如我预期的那样。当我在整个代码完成之前多次单击时，它将堆叠。

我的期望是使用async并承诺禁用事件，直到整个代码完成为止，这就是我使用此CodePen示例之类的回调的方式。

此外，我无法完全理解Async和Promise的概念。我认为Async + Promise function现实生活中将诸如书签之类的代码本身分离出来吗？很难理解代码内部发生了什么。

有人可以向我解释异步和诺言如何在代码中起作用并防止事件发生吗？

到目前为止，这是我完成的结果：

class Async {
    constructor(elem) {
        this.elem = document.querySelectorAll(elem)
        this.flag = true;
        this.selector(this.elem, 'click');
    }
    selector(node, eventName) {
        node.forEach(item => {
            item.addEventListener(eventName, (e) => this.group(e))
        })
    }
    waiting() {
        if (this.flag) {
            this.flag = false;
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(console.log('waiting . . .'))
                }, 2000)
            })
        }
    }
    result() {
        console.log('test');
        this.flag = true;
    }
    async group(e) {
        const a = await this.waiting();
        const b = await this.result();
    }
}
const async = new Async('.button');

===================原始问题===================

我在Node js中使用导入/导出分离了代码块，以便在重构时看起来更加清晰。

一个问题是，this.flag当我将布尔标志传递给init.js像这样的参数时，它不会阻止事件覆盖：

首先查看代码：

// =================== init ===================
'use strict';
import Terminal from './terminal.js';
import Touch from './touch.js';
export const slider = (function() {
    class Slider {
        constructor(elem) {
            this.elem = document.querySelector(elem);
            this.flag = false;
            this.terminal = new Terminal(this.elem);
            this.touch = new Touch(this.elem);
            this.terminal.insert(this.elem, 'click', this.touch.clicked.bind(this.touch));
        }
        wait(flag, callback) {
            flag = false; // the boolean can't prevent the event overriding right now.
            let bound = callback.bind(this);
            console.log('waiting . . .');
            setTimeout(bound, 1000, flag);
        }
        done(flag) {
            console.log('done');
            flag = true;
        }
    }
    return {
        init: new Slider('.contents')
    }
}())

// =================== terminal.js ===================
export default class Terminal {
    constructor(elem) {
        this.elem = elem;
    }
    insert(node, eventName, callback) {
        node.addEventListener(eventName, callback);
    }
}

// =================== touch.js ===================
import {slider} from './a.js';
export default class Touch {
    constructor(elem) {
        this.elem = elem;
        this.flag = true;
    }
    clicked(e) {
        if (this.flag) {
            console.log(`clicked`);
            let slide = slider;
            slide.init.wait(this.flag, slide.init.done);
        }
    }
}

但是奇怪的是，当我同时替换两个函数wait()和result()to时touch.js，它会阻止事件直到倒计时完成。

// touch.js
wait(callback) {
    this.flag = false;
    let bound = callback.bind(this);
    console.log('waiting . . .');
    setTimeout(bound, 1000);
}
done(flag) {
    console.log('done');
    this.flag = true;
}

我想知道为什么当标志传递给另一个标志时不能阻止该事件，js file以及如何使其暂时禁用该事件。

Answer 1

说明

一般来说

• 该async/await模式随JavaScript ES2017一起引入，是较旧的Promise的语法糖
• 一些较旧的浏览器不支持 async/await
• async是一种新的说法return Promise((resolve) => { ... })。
• await是相对的async并且是更新的表达方式.then(result => { ... })。
  • await 只能用于标记为 async
• try/catch是的对应物.catch(error => { ... })。它实际上不是新的，但是您可以在此上下文中使用它。

您可以在此处了解更多信息async/await

码

我对您的代码进行了一些较小的更改，以使其更有意义并编写了一些注释，以便您了解此处发生的一切。

class Async {
    constructor(elem) {
        this.elem = document.querySelectorAll(elem)
        this.isRunning = false; // <-- Rename the flag variable to something more meaningful
        this.selector(this.elem, 'click');
    }
    selector(node, eventName) {
        node.forEach(item => {
            item.addEventListener(eventName, (e) => this.group(e))
        })
    }
    waiting() {
        return new Promise((resolve, reject) => { // <-- Move the Promise to here so that every codepath returns something
            if (!this.isRunning) {
                this.isRunning = true;
                console.log('Waiting ... '); // <-- Move the waiting before the timeout, because inside it is not actually waiting, its rather done

                setTimeout(() => { // <-- setTimeout runs the provided function after the provided time in milliseconds elapsed
                    this.isRunning = false; // <-- Switch the isRunning after the timeout, because that makes more sense (because now it is not running anymore)
                    resolve('Done'); // <-- Change the text to done and actually resolve it (eg. remove the console.log)
                }, 2000)
            } else {
                reject('There is already a button function running'); // <-- reject is like throwing an error
            }
        })
    }
    result() {
        console.log('test');
    }
    async group(e) {
        try {
            const a = await this.waiting(); // <-- Assigns 'Done' to the variable a
            console.log(a); // <-- prints the message

            this.result(); // <-- prints 'test' immidiatly after the above console.log
        } catch (error) {
            console.log(error); // <-- Prints the reject message in case the button is already running
        }

        /* group could also be written with the old syntax like this:

        this.waiting().then(result => {
            console.log(result); // Will print "Done" after 2000 milliseconds

            this.result(); // Will print test instantly after the above console.log(). You dont need to await it, because it is not an async function
        }).catch(error => {
            console.log(error); // Will print the reject message in case the button is already running
        });

        */
    }
}
const asyncButton = new Async('.button'); // <-- Don't use async as a variable name. It's a reserved keyword

运行示例

再次是相同的代码，但没有注释，因此您可以在此处在StackOverflow上直接对其进行测试。

class Async {
    constructor(elem) {
        this.elem = document.querySelectorAll(elem)
        this.isRunning = false; // <-- Rename the flag variable to something more meaningful
        this.selector(this.elem, 'click');
    }
    selector(node, eventName) {
        node.forEach(item => {
            item.addEventListener(eventName, (e) => this.group(e))
        })
    }
    waiting() {
        return new Promise((resolve, reject) => { // <-- Move the Promise to here so that every codepath returns something
            if (!this.isRunning) {
                this.isRunning = true;
                console.log('Waiting ... '); // <-- Move the waiting before the timeout, because inside it is not actually waiting, its rather done

                setTimeout(() => { // <-- setTimeout runs the provided function after the provided time in milliseconds elapsed
                    this.isRunning = false; // <-- Switch the isRunning after the timeout, because that makes more sense (because now it is not running anymore)
                    resolve('Done'); // <-- Change the text to done and actually resolve it (eg. remove the console.log)
                }, 2000)
            } else {
                reject('There is already a button function running'); // <-- reject is like throwing an error
            }
        })
    }
    result() {
        console.log('test');
    }
    async group(e) {
        try {
            const a = await this.waiting(); // <-- Assigns 'Done' to the variable a
            console.log(a); // <-- prints the message

            this.result(); // <-- prints 'test' immidiatly after the above console.log
        } catch (error) {
            console.log(error); // <-- Prints the reject message in case the button is already running
        }

        /* group could also be written with the old syntax like this:

        this.waiting().then(result => {
            console.log(result); // Will print "Done" after 2000 milliseconds

            this.result(); // Will print test instantly after the above console.log(). You dont need to await it, because it is not an async function
        }).catch(error => {
            console.log(error); // Will print the reject message in case the button is already running
        });

        */
    }
}
const asyncButton = new Async('.button'); // <-- Don't use async as a variable name. It's a reserved keyword

class Async {
    constructor(elem) {
        this.elem = document.querySelectorAll(elem)
        this.isRunning = false;
        this.selector(this.elem, 'click');
    }
    selector(node, eventName) {
        node.forEach(item => {
            item.addEventListener(eventName, (e) => this.group(e))
        })
    }
    waiting() {
        return new Promise((resolve, reject) => { 
            if (!this.isRunning) {
                this.isRunning = true;
                console.log('Waiting ... '); 
                
                setTimeout(() => { 
                    this.isRunning = false;
                    resolve('Done');
                }, 2000)
            } else {
                reject('There is already a button function running'); 
            }
        })
    }
    result() {
        console.log('test');
    }
    async group(e) {
        try {
          const a = await this.waiting(); 
          console.log(a); 
          this.result();
        } catch(error) {
          console.log(error);
        }
    }
}
const asyncButton = new Async('.button');