简单用户脚本运行缓慢，有时无法正常工作

debugcn 发表于 Dev

亚当

附带说明，我是JS的新手，这是我的第一个脚本。

我正在编写一个小脚本，该脚本应该允许我使用键盘快捷键在未聚焦的newtab中打开flickr页面中的最大可用图像。

我目前面临两个问题：

该脚本的加载速度很慢，这意味着如果我使用箭头键更改幻灯片中的图像，则需要等待1或2秒钟，然后才能按键盘快捷键在newtab中打开图像。如果我不等，它将根据我跳过这些图像的速度在新选项卡中打开幻灯片显示的先前图像之一。（它应该始终在newtab中打开我当前正在查看的图像）
我使用log（mainurl）打印“ mainurl”的当前内容，这是指向当前打开的图像的最大可用大小的链接。但是由于某种原因，它总是为我提供上一张图片的网址，具体取决于我跳过幻灯片显示的速度（即使在新标签页中打开了正确的图片）。

如果您要检查脚本，这是flickr帐户的URL。（必须在照片流[幻灯片模式]中运行）flickr照片流的URL

这是我写的代码

// ==UserScript==
// @name         Flickr Max NewTab
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Open Max sized flickr image in a new tab using key shorcut
// @author       Newbie
// @include     /flickr\.com/
// @grant       GM_openInTab
// @require     https://code.jquery.com/jquery-3.3.1.min.js
// ==/UserScript==

var page ='';
var sizes = [];
var links = [];
var length = 0;
var mainurl = '';

function geturl() { // function used to get the link of biggest image
    var action = function (sourceCode) {
        sizes = sourceCode.match(/modelExport: {.+?"sizes":{.+?}}/i); // extract the part of html that containes modelExport:
        links = sizes[0].match(/"displayUrl":"[^"]+"/ig); // extract the urls dictionary from the dictionary modelExport:
        length = links.length; //get the length of the dictionary "links"
        // extract the last(biggest) url from the links dictionary and put them in an array "links"
        mainurl = links[links.length-1].replace(/"displayUrl":"([^"]+)"/i, "$1").replace(/\\/g, "").replace(/(_[a-z])\.([a-z]{3,4})/i, '$1' + "." + '$2');
    }
    $.get(document.URL, action);
}

function log(x) {
    console.log(x);
}
// function used to get to run the url grabber everytime you change the image in slideshow using arrowkeys
function navigation (e) {
    if (e.keyCode == 37 || e.keyCode == 39) {
        geturl();
        log(mainurl);// log to check the current contents of mainurl
    }
}
// function used to open image in a newtab when "alt + Q" are pressed
function newtab (e) {
    if (e.altKey && e.keyCode == 81) {
        GM_openInTab(mainurl);
    }
}

geturl(); //run the function

document.addEventListener('keyup', navigation);
document.addEventListener('keydown', newtab);

非常感谢您的帮助！

wOxxOm

最好截取该站点对其服务器API发出的现有快速请求（可以在devtools网络面板中进行检查），而不是发出其他缓慢请求。

为此，我们将使用unsafeWindow并挂钩XMLHttpRequest原型。还要在处运行脚本，document-start以便它在页面发出请求之前附加拦截器。

// ==UserScript==
// @name        Flickr Max NewTab
// @match       https://www.flickr.com/*
// @grant       GM_openInTab
// @run-at      document-start
// ==/UserScript==

const xhrOpen = unsafeWindow.XMLHttpRequest.prototype.open;
unsafeWindow.XMLHttpRequest.prototype.open = function (method, url) {
  if (/method=[^&]*?(getPhotos|getInfo)/.test(url)) {
    this.addEventListener('load', onXhrLoad, {once: true});
  }
  return xhrOpen.apply(this, arguments);
};

const imgUrls = {};

function onXhrLoad() {
  const json = JSON.parse(this.response);
  const photos = json.photos ? json.photos.photo : [json.photo];
  for (const {id, url_o} of photos) {
    imgUrls[id] = url_o;
  }
}

document.addEventListener('keydown', e => {
  if (e.altKey && e.code === 'KeyQ' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
    const id = location.pathname.split('/')[3];
    const url = imgUrls[id];
    if (url) GM_openInTab(url, true);
  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。