為什么我的代碼在Safari或Opera中不起作用？

Question

js有一個函數向表中顯示消息（消息存儲在json ）。 在谷歌瀏覽器中，它可以運行，但Safari，Opera或Microsoft Edge - 不！ 代碼中有一個錯誤與調用setTimeout (callback, 5000)相關聯（沒有任何內容發送到回調）。因此， For (var i = 0; i <respond.length; i ++)將不起作用因為respond === undefined 。

但為什么會這樣呢？

 callback( [{ "time": "1500303264", "user": "qwe", "message": "we", "id": 1 }, { "time": "1500303987", "user": "Max", "message": "q", "id": 2 } ]); function smile(mess) { var smile = ":)"; var graficSmile = "<img src = './image/Smile.png' alt='Smile' align='middle'>"; var string_with_replaced_smile = mess.replace(smile, graficSmile); var sad = ":(" var graficSad = "<img src = './image/Sad.png' alt='Smile' align='middle'>"; var string_with_replaced_smile_and_sad = string_with_replaced_smile.replace(sad, graficSad); return string_with_replaced_smile_and_sad; } $.getJSON('data/messages.json', callback); var exists = []; function callback(respond) { var timeNow = Date.now(); for (var i = 0; i < respond.length; i++) { var data = respond[i]; if (exists.indexOf(data.id) != -1) continue; var timeInMessage = data.time * 1000; var diff_time = (timeNow - timeInMessage); if (diff_time <= 3600000) { var rowClone = $('.mess_hide').clone().removeClass('mess_hide'); var newDate = new Date(timeInMessage); var dateArray = [newDate.getHours(), newDate.getMinutes(), newDate.getSeconds()] var res = dateArray.map(function(x) { return x < 10 ? "0" + x : x; }).join(":"); $('#messages').append(rowClone); $('.time', rowClone).html(res); $('.name', rowClone).html(data.user); $('.message', rowClone).html(smile(data.message)); $('.scroller').scrollTop($('#messages').height()); exists.push(data.id); } } setTimeout(function(){callback(respond)}, 5000); } 

 .scroller { width: 490px; height: 255px; max-height: 255px; overflow-y: auto; overflow-x: hidden; } table#messages { min-height: 260px; width: 100%; background: #fffecd; border: none; } table#messages::-webkit-scrollbar { width: 1em; } table#messages::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } table#messages::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; } tr { height: 20%; display: block; } td.time, td.name { width: 70px; max-width: 75px; text-align: center; } td.name { font-weight: bold; } form#text_submit { display: inline-flex; align-items: flex-start; } input#text { width: 370px; height: 30px; margin-top: 20px; background: #fffecd; font-family: 'Montserrat'; font-size: 16px; border: none; align-self: flex-start; } input#submit { padding: 0; margin-left: 21px; margin-top: 21px; height: 30px; width: 95px; background: #635960; border: none; color: white; font-family: 'Montserrat'; font-size: 16px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scroller"> <table id="messages"> <tr class="mess_hide"> <td class="time"></td> <td class="name"></td> <td class="message"></td> </tr> </table> </div> <form method="POST" id="easyForm"> <input type="text" name="text" id="text"> <input type="submit" value="Send" id="submit"> </form> </div> 

鉻

歌劇

Answer 1

1. 由於假設var exists - 數組，但是在調用$.getJSON(...)之后，僅在稍后將數組（ [] ）的值賦給它。 因此，當第一次調用callback值時， []沒有設置為exists 。我們只需要在第一次callback.調用之上移動var exists callback.
2. 當計時器callback ，沒有任何內容傳遞給它。 但是計時器需要重新讀取文件中的消息並在屏幕上顯示它們。相反， setTimeout(function(){callback(respond)}, 5000); 我們需要setTimeout(function(){$.getJSON('data/messages.json', callback);}, 5000); 。

 var exists = []; $.getJSON('data/messages.json', callback); function callback(respond) { var timeNow = Date.now(); for (var i = 0; i < respond.length; i++) { var data = respond[i]; if (exists.indexOf(data.id) != -1) continue; var timeInMessage = data.time * 1000; var diff_time = (timeNow - timeInMessage); if (diff_time <= 3600000) { var rowClone = $('.mess_hide').clone().removeClass('mess_hide'); var newDate = new Date(timeInMessage); var dateArray = [newDate.getHours(), newDate.getMinutes(), newDate.getSeconds()] var res = dateArray.map(function(x) { return x < 10 ? "0" + x : x; }).join(":"); $('#messages').append(rowClone); $('.time', rowClone).html(res); $('.name', rowClone).html(data.user); $('.message', rowClone).html(smile(data.message)); $('.scroller').scrollTop($('#messages').height()); exists.push(data.id); } } setTimeout(function() { $.getJSON('data/messages.json', callback); }, 5000); } 

Answer 2

由於callback需要將數組作為參數傳遞，因此setTimeout必須確保在調用callback ，它會傳遞數組。

更改

setTimeout(callback, 5000);

至

setTimeout(function(){callback(respond)}, 5000);

它允許使用參數調用回調作為將由setTimeout調用的匿名函數的主體。

另外，作為旁注，如果你使用了respond.forEach()而不是respond.forEach() for循環，代碼會更清晰：

   respond.forEach(function(data) {

    if (exists.indexOf(data.id) != -1) continue;

    var timeInMessage = data.time * 1000;
    var diff_time = (timeNow - timeInMessage);

    if (diff_time <= 3600000) {
      var rowClone = $('.mess_hide').clone().removeClass('mess_hide');

      var newDate = new Date(timeInMessage);
      var dateArray = [newDate.getHours(), newDate.getMinutes(), newDate.getSeconds()]
      var res = dateArray.map(function(x) {
        return x < 10 ? "0" + x : x;
      }).join(":");

      $('#messages').append(rowClone);
      $('.time', rowClone).html(res);
      $('.name', rowClone).html(data.user);
      $('.message', rowClone).html(smile(data.message));
      $('.scroller').scrollTop($('#messages').height());

      exists.push(data.id);
    }
  });