时间戳

首页 > 解决方案 > 在事件处理函数中返回一个值

javascript - 在事件处理函数中返回一个值

问题描述

我现在完全不知道，我希望任何有更好想法的人帮助给出一个简洁的解决方案。这是我的代码：

好的，我在这里尝试编写的是一个程序，它监听load事件以从 api 获取数据并将其保存在缓存中，然后在用户尝试退出浏览器时清除缓存。使用该opt参数设置何时加载和卸载方法外的缓存。

class myc {
  // ... 
  async get(url, opt = {}) {
    let js, er, data;
    if (opt.load === true) {
      window.addEventListener('load', getData);
    }
    if (opt.unload === true) {
      window.addEventListener('beforeunload', removeData);
    }
    async function getData() {
      try {
        let r = await fetch(url) 
        if (!r.ok) {
          throw new Error(r.statusText)
        } else {
          js = await r.json();
        }
      } catch(e) {
        er = e.message;
      }
      if (js) {
        localStorage.setItem(key, js);
        data = localStorage.getItem(key);
      }
      // Main problem here (*)
      return {
        data : data ? data : null,
        error: er
      };
    }
    function removeData(){
      localSorage.clear();
    }
    let res = await getData();
    window.removeEventListener('load', getData);
    window.removeEventListener('beforeunload, removeData);
    return res;
  }
}

带 (*) 的行是这里的主要问题。那么我如何从该函数返回所需的值，然后在另一个实例中使用

标签： javascript

解决方案

简短的回答：你没有。

即使您从事件处理程序返回了一个值，它也无处可去，因为您无权访问实际调用事件处理程序以获取该返回值的事物。

相反，您只需在范围内的某个位置设置值，以后可以获取它。

由于您在上课，您可以简单地将其设置为this.myValue，然后用相同的方式抓取它。

唯一的问题是您必须确保您的事件处理程序绑定到正确的范围。

您可以通过以下两种方式之一来做到这一点。在这条线上：

window.addEventListener('load', getData);

你可以绑定getData，所以它看起来像这样：

window.addEventListener('load', getData.bind(this));

这样，this内部getData将引用您的班级。

或者，您可以切换此行：

async function getData() {

到箭头函数语法：

const getData = async () => {

它将自动绑定到当前上下文。

推荐阅读