javascript - 尝试调用位于另一个函数内部的函数

Question

我知道这个问题之前已经被问过，但之前的答案都没有帮助我。

这是我的功能:

function execute() {
    console.log('here')
    const q = document.getElementById('myinput').value
    return gapi.client.youtube.search.list({
      "part": "snippet",
      "order": "viewCount",
      "q": q,
      "type": "video",
      "videoDefinition": "high",
      "maxResults": 10
    })
        .then(function(response) {
          console.log("Response", response);
          const z = response.result.items


         console.log("x", z)
          return(z.map(vid => {
            console.log("vid", vid)

            const date = document.createElement('div')
            const title = document.createElement('h2')
            const video = document.createElement('iFrame')


            date.textContent = vid.snippet.publishedAt
            title.textContent = vid.snippet.title



            const x = document.getElementById('results')
            console.log(date)
            x.append(date)
            x.append(title)
            x.append(video)


            const w = document.getElementById('date')
            const v = document.getElementById('view')
            function sorting(){

              const items = vid.childNodes;
              const itemsArr = [];
              for (var i in items) {
                if(items[i].nodeType == 1){
                  itemsArr.push(items[i])
                }
              }
              itemsArr.sort(function(a,b){
                return a.innerHTML === b.innerHTML
                    ? 0
                    : (a.innerHTML > b.innerHTML ? 1 : -1);
              });
              for (i = 0; i < itemsArr.length; ++i){
                w.appendChild(itemsArr[i])
              }
          }
            return(x)


          }))

              },
              function(err) { console.error("Execute error", err); });
  }

我想在我的 onclick 上触发排序功能:<option onclick="execute().sorting()"id = "date">Date</option>

如果您知道我如何调用它，或者即使您知道按日期和观看次数对视频进行排序的更好方法，请留下评论或答案。任何帮助表示赞赏。

哦!我应该补充一点，这必须用纯原生 javascript 来完成。

编辑

您要求提供 HTML:

<button onclick="execute()">Search</button>
<h3>Sort:</h3>
<select>
  <option onclick="execute.b()"id="view" value="viewCount">View Count</option>
  <option  onclick="execute().sorting()"id = "date">Date</option>
</select>

Answer 1

您可以使用嵌套函数创建构造函数sorting启动时范围限定为该对象，然后在 js 中启动它，即:

function Execute() {

this.search = function(){
    console.log('here')
    const q = document.getElementById('myinput').value
    return gapi.client.youtube.search.list({
        "part": "snippet",
        "order": "viewCount",
        "q": q,
        "type": "video",
        "videoDefinition": "high",
        "maxResults": 10
    })
        .then(function(response) {
                console.log("Response", response);
                const z = response.result.items


                console.log("x", z)
                return (z.map(vid => {
                    console.log("vid", vid)

                    const date = document.createElement('div')
                    const title = document.createElement('h2')
                    const video = document.createElement('iFrame')


                    date.textContent = vid.snippet.publishedAt
                    title.textContent = vid.snippet.title



                    const x = document.getElementById('results')
                    console.log(date)
                    x.append(date)
                    x.append(title)
                    x.append(video)


                    const w = document.getElementById('date')
                    const v = document.getElementById('view')

                    this.sorting();
                    return (x)


                }))

            },
            function(err) {
                console.error("Execute error", err);
            });
};

this.sorting = function() {

    const items = vid.childNodes;
    const itemsArr = [];
    for (var i in items) {
        if (items[i].nodeType == 1) {
            itemsArr.push(items[i])
        }
    }
    itemsArr.sort(function(a, b) {
        return a.innerHTML === b.innerHTML ?
            0 :
            (a.innerHTML > b.innerHTML ? 1 : -1);
    });
    for (i = 0; i < itemsArr.length; ++i) {
        w.appendChild(itemsArr[i])
    }
};

}

然后在整个页面加载时创建一个实例:

  var executeInstance;
  window.onload = function(event){
    executeInstance = new Execute();
  };

然后在 HTML 中调用实例(不确定 b 是什么函数，在初始示例中不存在):

<button onclick="executeInstance.search()">Search</button>
<h3>Sort:</h3>
<select>
  <option onclick="executeInstance.b()"id="view" value="viewCount">View Count</option>
  <option  onclick="executeInstance.sorting()"id = "date">Date</option>
</select>

有关对象构造函数的更多信息:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor