变量更改后调用事件

Posted 2023-04-15

【中文标题】变量更改后调用事件

【英文标题】：Call event after variable has changed

【发布时间】：2019-04-11 22:41:04

【问题描述】：

对于一个学校项目，我正在制作一个让用户互相倾听的网站。

到目前为止，我有这个按钮可以让用户收听另一个用户正在收听的歌曲，包括正确的位置。但这只会调用这个函数一次。

我想要的是当 [randomNummer 更改时，它会自动再次调用该函数。有谁知道我该如何做到这一点以及我必须使用什么来实现这一点？

这是按钮的代码：

         document.getElementById('play-song').addEventListener('click', function()       
        $.ajax(
          url: 'https://api.spotify.com/v1/me/player/play',
          type: 'PUT',
          headers: 
            'Authorization': 'Bearer ' + access_token
          ,
          dataType: "json",
          contentType: "application/json",
          data: JSON.stringify(
            "uris": [randomNummer],
            "position_ms": seconds
          )
        );
        , false);  

randomNummer 当前是使用 Array 生成的：

var randomNummer;      
    var myArray = [
      "spotify:track:1EtcyegB7JLkAwwqiPyeJ6", 
      "spotify:track:6rAXHPd18PZ6W8m9EectzH", 
      "spotify:track:5qaEfEh1AtSdrdrByCP7qR", 
      "spotify:track:1CnPYaKxTVb4LWOtiGOm0m", 
      "spotify:track:3qEg6xYffvuvwpq4U6FRrK"
    ];

    setInterval(function()
           callItem();
        , 200000); 
   var callItem = function()       
    randomNummer = myArray[Math.floor(Math.random()*myArray.length)];
      document.getElementById("song-uri").innerhtml = randomNummer;
   

【参考方案1】：

我看到你使用了 Jquery。所以... 首先稍微修改一下你的代码：

$('#play-song').on('click', function(e) 
  $.ajax(
    url: 'https://api.spotify.com/v1/me/player/play',
    type: 'PUT',
    headers: 
      'Authorization': 'Bearer ' + access_token
    ,
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify(
      "uris": $("#song-uri").val(),
      "position_ms": seconds
    )
  );
, false);

还有：

var randomNummer;
var myArray = [
  "spotify:track:1EtcyegB7JLkAwwqiPyeJ6",
  "spotify:track:6rAXHPd18PZ6W8m9EectzH", 
  "spotify:track:5qaEfEh1AtSdrdrByCP7qR", 
  "spotify:track:1CnPYaKxTVb4LWOtiGOm0m", 
  "spotify:track:3qEg6xYffvuvwpq4U6FRrK"
];
setInterval(function()
  callItem();
, 200000);
var callItem = function()
  randomNummer = myArray[Math.floor(Math.random()*myArray.length)];
  $("#song-uri").val(randomNummer);

在这种情况下，我们将使用隐藏输入来存储随机数：

<input type="hidden" id="song-uri" />

最后捕获更改事件：

$("#song-uri").on('change', function(e)
  //event on change random value
);

【讨论】：

当我实现这个时，我在控制台中得到 ''Undefined'' as randomNummer

现在似乎对大多数人都有效。只有那个捕获更改事件似乎没有做任何事情。我已经这样测试过它：` $("#song-uri").on('change', function(e) buttonPressed = +1; );` 但是 buttonPressed 的值根本没有变化。

【参考方案2】：

var randomNummer = 
    value: function value(newValue) 
        // if a new value is set, assign it to the internal "_value" and trigger the callback which can do stuff as you want
        if (typeof newValue !== "undefined") 
            this._value = newValue;
            this.callback();
        
        // always return the current value
        return this._value;
    ,
    callback: function callback() 
        // do the stuff you want to do after value alters
        console.log("Value altered to " + this._value);
        
;

var myArray = [
      "spotify:track:1EtcyegB7JLkAwwqiPyeJ6", 
      "spotify:track:6rAXHPd18PZ6W8m9EectzH", 
      "spotify:track:5qaEfEh1AtSdrdrByCP7qR", 
      "spotify:track:1CnPYaKxTVb4LWOtiGOm0m", 
      "spotify:track:3qEg6xYffvuvwpq4U6FRrK"
];

var callItem = function() 
    document.getElementById("song-uri").innerHTML = randomNummer.value(myArray[Math.floor(Math.random()*myArray.length)]);

setInterval(callItem, 2000); 

<div id="song-uri"></div>

变量有点愚蠢。但是，如果您不直接分配新值，而是使用函数，您可以给他们一点控制权。