- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以,我需要你的帮助/协助来完成这些任务。
我使用 Arrows 创建了一个搜索功能。测试后,我注意到它不能单独在 IE 11 中工作。它适用于其他浏览器。后来我意识到箭头函数在 IE 11 上不起作用。所有让它发挥作用的努力都被证明是失败的。
请在下面找到箭头函数和我从箭头函数及其对应的 JS 创建的 JS 函数
箭头函数
<script>
var search = document.getElementById('searchTerm_de');
var search2 = document.getElementById('searchTerm_en');
var matchList = document.getElementById('result');
var searchStates = async searchText => {
var res = await fetch('../data/info.json');
var states = await res.json();
let matches = states.filter(state => {
var regex = new RegExp(`^${searchText}`,'gi');
return state.name.match(regex);
});
if(searchText.length === 0){
matches = [];
matchList.innerHTML = '';
}
outputHtml(matches);
};
var outputHtml = matches => {
if(matches.length > 0){
var html = matches.map(match =>
`<div class="card result-list de en">
<h6><span class="my-result"><a href="${match.url}" target="_blank">${match.name}</a> </h6></span>
</div>
`).join('');
matchList.innerHTML = html;
}
};
search.addEventListener('input', () => searchStates(search.value));
search2.addEventListener('input', () => searchStates(search2.value));
</script>
普通 JS 函数(我从箭头函数创建的)
<script>
var search = document.getElementById('searchTerm_de');
var search2 = document.getElementById('searchTerm_en');
var matchList = document.getElementById('result');
var searchStates = async function searchStates (searchText) {
var res = await fetch('../data/info.json');
var states = await res.json();
var matches = states.filter(function (state) {
var regex = new RegExp("^".concat(searchText), "gi");
return state.name.match(regex);
});
if (searchText.length === 0) {
matches = [];
matchList.innerHTML = '';
};
outputHtml(matches);
};
var outputHtml = function (matches) {
if (matches.length > 0) {
var html = matches.map(function (match) {
return "<div class=\"card result-list de en\">\n\t\t<h6><span class=\"my-result\"><a href=\"".concat(match.url, "\" target=\"_blank\">").concat(match.name, "</a> </h6></span>\n\t</div>\n\t");
}).join('');
matchList.innerHTML = html;
}
};
search.addEventListener('input', function () {
return searchStates(search.value);
});
search2.addEventListener('input', function () {
return searchStates(search2.value);
});
</script>
JSON 文件
[
{
"name":"Running ",
"url": "url": "http://google.com"
},
{
"name":"Javascript",
"url": "url": "http://google.com"
},
{
"name":"On old browser",
"url": "url": "http://google.com"
},
{
"name":"without arrow",
"url": "url": "http://google.com"
},
{
"name":"functions and works well",
"url": "http://google.com"
},
{
"name":"Please, help me",
"url": "url": "http://google.com"
},
{
"name":"I gladyl appreciate your response",
"url": "url": "http://google.com"
},
]
我已经更改了箭头功能,我注意到 IE 11 不支持 Await/Async。是否有人可以使此代码在 IE.11 上运行所有帮助和帮助将不胜感激
谢谢
编辑
我已经能够使用 Babel 转译器:https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator/
这是我的HTML
<div class="search">
<input type="text" class="searchTerm de" id="searchTerm_de" placeholder="Was suchst du ?" onfocus="this.placeholder=''" onblur="this.placeholder='Was suchst du ?'">
<input type="text" class="searchTerm en" id="searchTerm_en" placeholder="What are you looking for ?" onfocus="this.placeholder=''" onblur="this.placeholder='What are you looking for ?'">
</div>
<ul class="list-group-search" id="result"></ul>
<br/>
</div> ```
**and this is the transpiled/compiled ES5 for IE 11**
<script>
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error);
return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args
); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
var search = document.getElementById('searchTerm_de');
var search2 = document.getElementById('searchTerm_en');
var matchList = document.getElementById('result');
var searchStates = function () {
var _ref = _asyncToGenerator(function* (searchText) {
var res = yield fetch('./data/info.json');
var states = yield res.json();
let matches = states.filter(function(state) {
var regex = new RegExp(`^${searchText}`, 'gi');
return state.name.match(regex);
});
if (searchText.length === 0) {
matches = [];
matchList.innerHTML = '';
}
outputHtml(matches);
});
return function searchStates(_x) {
return _ref.apply(this, arguments);
};
}();
var outputHtml =function(matches) {
if (matches.length > 0) {
var html = matches.map(match => `<div class="card result-list de en">
<h6><span class="my-result"><a href="${match.url}" target="_blank">${match.name}</a> </h6></span>
</div>
`).join('');
matchList.innerHTML = html;
}
};
search.addEventListener('input', () => searchStates(search.value));
search2.addEventListener('input', () => searchStates(search2.value));
</script>
While the JSON file still remains the same.
It's still working on all browsers except IE 11.
Its gettings tiring but I'm not determined to give up
Anyone else knows what could be done at this point to make the code run on IE 11
Thanks
最佳答案
检查这个link
我使用 babel repl 来生成 IE 兼容的代码。您应该按照@David Barshav 提到的说明进行操作,但您需要正确配置您的 babel 以使用 IE 11。您还应该检查 preset-env用于通天塔。
编辑: 下面转译的代码只是一个可用的 javascript 版本。 但是 缺少的部分是 IE 11 不支持 fetch
。您必须为此使用 polyfill 或使用 XHR 请求或使用简化发出 XHR 请求的库(如 jquery)。
Github Fetch填充物。 bluebird Promise polyfill.
生成的代码:
var search = document.getElementById('searchTerm_de');
var search2 = document.getElementById('searchTerm_en');
var matchList = document.getElementById('result');
var searchStates = function searchStates(searchText) {
var res, states, matches;
return regeneratorRuntime.async(function searchStates$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return regeneratorRuntime.awrap(fetch('../data/info.json'));
case 2:
res = _context.sent;
_context.next = 5;
return regeneratorRuntime.awrap(res.json());
case 5:
states = _context.sent;
matches = states.filter(function (state) {
var regex = new RegExp("^".concat(searchText), "gi");
return state.name.match(regex);
});
if (searchText.length === 0) {
matches = [];
matchList.innerHTML = '';
}
;
outputHtml(matches);
case 10:
case "end":
return _context.stop();
}
}
});
};
var outputHtml = function outputHtml(matches) {
if (matches.length > 0) {
var html = matches.map(function (match) {
return "<div class=\"card result-list de en\">\n\t\t<h6><span class=\"my-result\"><a href=\"".concat(match.url, "\" target=\"_blank\">").concat(match.name, "</a> </h6></span>\n\t</div>\n\t");
}).join('');
matchList.innerHTML = html;
}
};
search.addEventListener('input', function () {
return searchStates(search.value);
});
search2.addEventListener('input', function () {
return searchStates(search2.value);
});
关于javascript - 将 Async/Await 函数转换为针对 IE 11 的普通 ES5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58933983/
我有带皮肤的 DNN。我的 head 标签有 runat="server"所以我尝试在 head 标签内添加一个标签 "> 在后面的代码中,我在属性中设置了 var GoogleAPIkey。问题是它
我在 Node.JS 中有一个导出模块 exports.doSomethingImportant= function(req, res) { var id = req.params.id; Demo.
我是 F# 的新手,我一直在阅读 F# for Fun and Profit。在为什么使用 F#? 系列中,有一个 post描述异步代码。我遇到了 Async.StartChild函数,我不明白为什么
File 中有一堆相当方便的方法类,如 ReadAll***/WriteAll***/AppendAll***。 我遇到过很多情况,当我需要它们的异步对应物时,但它们根本不存在。 为什么?有什么陷阱吗
我最近开始做一个 Node 项目,并且一直在使用 async 库。我有点困惑哪个选项会更快。在某些数据上使用 async.map 并获取其结果,或使用 async.each 迭代一组用户并将他们的相应
您好,我正在试用 Springs 异步执行器,发现您可以使用 @Async。我想知道是否有可能在 @Async 中使用 @Async,要求是需要将任务委托(delegate)给 @Async 方法在第
我需要支持取消一个函数,该函数返回一个可以在启动后取消的对象。在我的例子中,requester 类位于我无法修改的第 3 方库中。 actor MyActor { ... func d
假设 asyncSendMsg不返回任何内容,我想在另一个异步块中启动它,但不等待它完成,这之间有什么区别: async { //(...async stuff...) for msg
我想用 Mocha 测试异步代码. 我跟着这个教程testing-promises-with-mocha .最后,它说最好的方法是 async/await。 以下是我的代码,我打算将 setTimeo
正如我有限(甚至错误)的理解,Async.StartImmediate 和 Async.RunSynchronously 在当前线程上启动异步计算。那么这两个功能究竟有什么区别呢?谁能帮忙解释一下?
我有一行使用await fetch() 的代码。我正在使用一些调用 eval("await fetch ...etc...") 的脚本注入(inject),但问题是 await 在执行时不会执行从ev
我正在尝试使用 nodeJS 构建一个网络抓取工具,它在网站的 HTML 中搜索图像,缓存图像源 URL,然后搜索最大尺寸的图像。 我遇到的问题是 deliverLargestImage() 在循环遍
我想结合使用 async.each 和 async.series,但得到了意想不到的结果。 async.each([1, 2], function(item, nloop) { async.s
我的代码有问题吗?我使用 async.eachSeries 但我的结果总是抛出 undefined。 这里是我的代码: async.eachSeries([1,2,3], function(data,
我想在 trait 中编写异步函数,但是因为 async fn in traits 还不被支持,我试图找到等效的方法接口(interface)。这是我在 Rust nightly (2019-01-0
async setMyPhotos() { const newPhotos = await Promise.all(newPhotoPromises); someOtherPromise();
async.js 中 async.each 与 async.every 的区别?似乎两者都相同,只是 async.every 返回结果。纠正我,我错了。 最佳答案 每个异步 .each(coll, i
我正在尝试对一组项目运行 async.each。 对于每个项目,我想运行一个 async.waterfall。请参阅下面的代码。 var ids = [1, 2]; async.each(ids,
我的目标是测试 API 调用,将延迟考虑在内。我的灵感来自 this post . 我设计了一个沙箱,其中模拟 API 需要 1000 毫秒来响应和更改全局变量 result 的值。测试检查 500
async.each 是否作为异步数组迭代工作? async.eachSeries 是否作为同步数组迭代工作?(它实际上等待响应) 我问这些是因为两者都有回调,但 async.each 的工作方式类似
我是一名优秀的程序员,十分优秀!