时间戳

首页 > 解决方案 > IE浏览器的反应问题

javascript - IE浏览器的反应问题

问题描述

在 Vuex 存储库中，我每 10 秒从服务器接收一次数据：

从中我通过计算属性将数据拉入组件内部：

 computed: {

    trackingStatusId: function () {
      return this.$store.state.tracking.trackingServerData.tracking_status_id;
    },
  },

接下来，我尝试在方法中使用这些数据：并且方法本身附加到 html block( <i class="state" :style="getIndicatorWidth()"></i>)中的样式

  methods: {

    getIndicatorWidth: function () {

      function widthCalculate(currentTrackingStatusId){

        console.log(currentTrackingStatusId);

      }

      return widthCalculate(this.trackingStatusId);

    },
  },

现在我们注意上面代码中的这一行：

console.log(currentTrackingStatusId);

如果我从服务器获取更改的数据，则控制台日志中的值会在除 IE-11（及以下）之外的所有浏览器中响应更改。

从服务器获取数据如下：（挂在生命周期钩子上mounted ()）

methods: {

    getTrackerIntervalData () {

        setInterval(()=>myTimer(this), 5000);

        function myTimer(th) {
             return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=get_tracking_data&key_id=" + th.$route.params.tracking.toLowerCase() , {
             })
            .then(response => {
              th.$store.commit('tracking/setTrackingServerData', response.data.data.tracking_data);
            })
            .catch(function (error) {
              console.log(error);
            });
        }
    },
  }



Vuex 存储库：

常量 axios = 要求（“axios”）；

export const state = () => ({

    trackingServerData: null,

});

export const mutations = {

    setTrackingServerData (state, trackingServerData) {
        state.trackingServerData = trackingServerData;
    },
};



我还复制了中间件的第一个请求，以便在渲染 DOM 树时能够处理数据：

导出默认函数 ({$axios, req, store, route}) {

  if(req != undefined) {
      store.commit('setIsFirstServerLoad', true);
  }

  else{
      store.commit('setIsFirstServerLoad', false);
  }

  if(route.name == "language-tracker-tracking") {

      return $axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=get_tracking_data&key_id=" + route.params.tracking.toLowerCase(), {})
          .then(response => {
              store.commit('tracking/setTrackingServerData', response.data.data.tracking_data);
          })
          .catch(function (error) {
              console.log(error);
          });

  }

}

结果，如果你更深入地观察情况，事实证明 IE 浏览器正确计算的只是从中间件接收到的代码：

введите сюда описание изображения

在上面的截图中，你可以观察到答案 8 - 是正确的 - 而答案 3 通常不清楚它来自哪里。（甚至可能来自存储库的最后一页——尽管我在那里有一个单独的存储库。我不知道为什么会发生这种情况。）

问：

为什么 IE 浏览器中的数据没有正确更新？
如何解决这个问题，或者是否有可能解决这个问题 - 以不同的方式实现一切？

标签： javascriptnode.jsvue.jsnuxt.js

解决方案

问题就在这里

getTrackerIntervalData () {

        setInterval(()=>myTimer(this), 5000);

        function myTimer(th) {
             return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=get_tracking_data&key_id=" + th.$route.params.tracking.toLowerCase() , {
             })
            .then(response => {
              th.$store.commit('tracking/setTrackingServerData', response.data.data.tracking_data);
            })
            .catch(function (error) {
              console.log(error);
            });
        }
    }

IE dosent 支持箭头功能。 你应该这样做

getTrackerIntervalData () {
let vm=this;
        setInterval(function(){myTimer(vm)}, 5000);

        function myTimer(th) {
             return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=get_tracking_data&key_id=" + th.$route.params.tracking.toLowerCase() , {
             })
            .then(response => {
              th.$store.commit('tracking/setTrackingServerData', response.data.data.tracking_data);
            })
            .catch(function (error) {
              console.log(error);
            });
        }
    }

因为 vue 使用 webpack。通常箭头函数将转换为普通函数以支持所有浏览器，但可能由于某种原因setInterval箭头函数不转换。试试看可能是问题

推荐阅读