Question

我已经有一段时间了，现在一直试图找出如何阻止我的代码打印相同的报价两次。

此外，当阵列中的每个单个对象都已打印出来时，我希望以某种方式重置它。所以，一旦你完成所有这些，你就可以浏览引号。

这是我的代码的基本部分：

document.getElementById('loadQuote').addEventListener("click", printQuote, false);

printQuote函数只包含从我的数组中访问信息的信息：

var randomObjectNumber = getRandomQuote();

var html = "<p class='quote'>"
        + quotes[randomObjectNumber].quote +
        "</p>"; 

document.getElementById('quote-box').innerHTML = html;

每次单击eventListener时都会显示一个随机对象：

function getRandomQuote () {

var randomObjectNumber = Math.floor(Math.random() * quotes.length );

return randomObjectNumber;
}

我有一些关于如何做到这一点的想法，我尝试过但没有成功。我尝试给每个对象一个布尔属性，但我似乎无法为每个属性分配一个布尔值而不会弄乱printQuote函数。

我也尝试将显示的对象分配给不同的数组，但是那里出现了同样的问题。

我觉得有一些关于eventListener的概念我并不完全理解，因为每当我尝试操作一个显示的对象时，我最终都会改变每一个对象。

这就是数组中典型对象的样子：

{quote : "Darkness is merely the absence of light"}

（我还有其他属性分配给对象，但我觉得提交它们是多余的）

如果有人可以解释或提示我如何解决这个问题，我已经挣扎了一段时间。

一些提示将不胜感激！

度过愉快的一天。

塞巴斯蒂安。

编辑：所有代码：https://jsfiddle.net/fusqb7hz/

Answer 1

基本上你需要的是：

创建一个单独的数组，用于存储您已经使用过的所有引号。
从初始数组中删除引号。
检查初始数组中是否仍有引号，如果没有，请从备份数组中取回它们。

Answer 2

问题是你两次调用addEventListener：

//Let's developers create multiple eventListeners without being redundant.
function onClicking (printFunction) {
document.getElementById('loadQuote').addEventListener("click", printFunction, false);
}
onClicking(printColor);
onClicking(printQuote);

通过调用onClicking两次使点击发生两次，因此addEventListener被添加两次，这意味着一次点击计为两次。

为此更改上述代码：

//Let's developers create multiple eventListeners without being redundant.
document.getElementById('loadQuote').addEventListener("click", function(){
  printColor();
  printQuote();
});

这是jsfiddle：

https://jsfiddle.net/fusqb7hz/3/

Answer 3

我认为最简单的方法是将你的引用数组洗牌，然后逐个浏览它们。这会给你下一个＆＃34;随机＆＃34;尚未见过的报价。我不喜欢的唯一部分是这个洗牌器（Fisher Yates的派生）修改原始报价数组。你可能不关心那个。

＆＃13;

import org.grails.datastore.mapping.core.Datastore
import org.grails.datastore.mapping.engine.event.AbstractPersistenceEvent
import org.grails.datastore.mapping.engine.event.AbstractPersistenceEventListener
import org.grails.datastore.mapping.engine.event.PreDeleteEvent
import org.springframework.context.ApplicationEvent

import org.grails.datastore.mapping.engine.event.EventType

class MongoPersistanceListener extends AbstractPersistenceEventListener  {

    def springSecurityService

    public MongoPersistanceListener(final Datastore datastore, def springSecurityService) {
        super(datastore)
        this.springSecurityService = springSecurityService
    }
    @Override
    protected void onPersistenceEvent(final AbstractPersistenceEvent event) {
        def entity = event.entityObject
        switch(event.eventType) {
            case EventType.PreInsert:
                initDefaults(entity)
                break
            case EventType.PostInsert:
                break
            case EventType.PreUpdate:
                def currentUser = springSecurityService.getCurrentUser()
                event.entityObject.updatedBy = currentUser ? currentUser.id : 0;
                event.entityObject.updatedOn = new Date();
                break;
            case EventType.PostUpdate:
                break;
            case PreDeleteEvent:
                break;
            case EventType.PostDelete:
                break;
            case EventType.PreLoad:
                break;
            case EventType.PostLoad:
                break;
            case EventType.Validation:
                initDefaults(entity)
                break;
        }
    }

    @Override
    public boolean supportsEventType(Class<!--? extends ApplicationEvent--> eventType) {
        return true
    }

    void initDefaults(entity) {
        def currentUser = springSecurityService.getCurrentUser()
        if (entity.createdBy == null) {
            entity.createdBy = currentUser? currentUser.id : 0;
        }
        if (entity.createdOn == null) {
            entity.createdOn = new Date();
        }
        if (entity.updatedBy == null) {
            entity.updatedBy = currentUser? currentUser.id : 0;
        }
        if (entity.updatedOn == null) {
            entity.updatedOn = new Date();
        }
    }
}

＆＃13;

// --------------------------------
// A bunch of quotes
// --------------------------------
var quotes = [];
quotes.push({quote : "Darkness is merely the absence of light"});
quotes.push({quote : "quote 2"});
quotes.push({quote : "quote 3"});
quotes.push({quote : "quote 4"});
quotes.push({quote : "quote 5"});
// --------------------------------

// --------------------------------
// Your favorite array shuffle utility
// --------------------------------
var shuffle = function(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
};
// --------------------------------

// --------------------------------
// construct a function to get a random unseen quote until
// all quotes have been seen.  Then reset...
// --------------------------------
var getQuote = (function(quotes, shuffle){
  var current = 0;

  var get = function(){
    if ( !quotes || !quotes.length ) { return ""; }
    if ( current >= quotes.length ){ current = 0; }
    if ( current === 0 ){
      console.log("randomizing quotes...");
      shuffle(quotes);
    }
    return quotes[current++].quote;
  };

  return get;
})(quotes, shuffle);
// --------------------------------

var printQuote = function(){
  document.getElementById('quote').innerText = getQuote();
};

document.getElementById('loadQuote').addEventListener("click", printQuote, false);

＆＃13;

我试图阻止我的功能在单击按钮

3 个答案: